MSDN Documentation

Understanding React Component Lifecycle Methods

React components go through a series of phases from creation to destruction. Understanding these lifecycle methods allows you to manage your component's state, perform side effects, and optimize performance.

The Three Phases of a Component's Lifecycle

A React component's lifecycle can be divided into three main phases:

Each of these phases has specific methods that are called at particular times, allowing you to hook into the process.

Mounting Methods

These methods are called in the following order when an instance of a component is being created and inserted into the DOM:

constructor()

The constructor is the first method called. It's used to set up initial state and bind event handlers. Avoid side effects here.

Called: Once when the component is initialized.

static getDerivedStateFromProps(props, state)

This method is called right before render, both during the initial mount and for subsequent updates. It should return an object to update the state, or null to indicate no state update.

Called: During render (initial and updates).

render()

This is the only required method in a class component. It examines this.props and this.state and returns one of the following types: React elements, arrays and fragments, portals, string and numbers, or Booleans or null.

Called: During render (initial and updates).

componentDidMount()

This method is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes, such as fetching data or setting up subscriptions, can go here.

Called: Once after the component is mounted.

Updating Methods

These methods are called in the following order when a component's props or state change:

static getDerivedStateFromProps(props, state)

As mentioned above, this method is called for updates as well, allowing you to update state based on new props.

Called: During render (initial and updates).

shouldComponentUpdate(nextProps, nextState)

The shouldComponentUpdate() method allows you to control whether React should continue with the re-rendering process. The default behavior is to re-render on every state change. Return false to skip an update.

Called: Before rendering when props or state change.

render()

This method is called again to produce the updated UI.

Called: During render (initial and updates).

getSnapshotBeforeUpdate(prevProps, prevState)

This method is called right before the changes are committed to the DOM. It's useful for capturing some information from the DOM (e.g., scroll position) before it potentially changes.

Called: Just before the virtual DOM is updated.

componentDidUpdate(prevProps, prevState, snapshot)

This method is invoked immediately after the component's updates are flushed to the DOM. It's a good place for side effects that depend on the DOM, like making network requests, but remember to compare props/state to avoid infinite loops.

Called: After updates are flushed to the DOM.

Unmounting Methods

This method is called when a component is being removed from the DOM:

componentWillUnmount()

This method is called right before a component is destroyed and unmounted. Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or removing event listeners.

Called: Just before a component is unmounted.

Error Handling Methods

These methods are called when an error occurs during rendering, in a lifecycle method, or in the constructor of any descendant child component.

static getDerivedStateFromError(error)

This lifecycle method is invoked after an error has been thrown by a descendant component. It receives the error that was thrown as a parameter and should return a value to update state.

Called: When an error occurs in a descendant.

componentDidCatch(error, info)

This lifecycle method is invoked after an error has been thrown by a descendant component. It receives the error and an object with the component stack trace. It's commonly used for logging errors.

Called: When an error occurs in a descendant.

Example Usage

Here's a simple example demonstrating the mounting phase:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    console.log('1. Constructor: Initializing state.');
  }

  static getDerivedStateFromProps(props, state) {
    console.log('2. getDerivedStateFromProps: Checking props and state.');
    return null; // No state update based on props in this example
  }

  componentDidMount() {
    console.log('4. componentDidMount: Component has been mounted. Fetching data...');
    // Example: Fetch data here
    this.timerID = setInterval(() => {
      this.setState({ count: this.state.count + 1 });
      console.log('   (Timer ticking...)');
    }, 1000);
  }

  render() {
    console.log('3. Render: Rendering the component.');
    return (
      <div>
        <h1>Counter: {this.state.count}</h1>
        <p>This component demonstrates the mounting lifecycle.</p>
      </div>
    );
  }

  componentWillUnmount() {
    console.log('5. componentWillUnmount: Cleaning up timer.');
    clearInterval(this.timerID);
  }
}

// To render this component:
// ReactDOM.render(<MyComponent />, document.getElementById('root'));

In a real application, you would typically observe these logs in your browser's developer console.