What are the React lifecycle stages?

React lifecycle stages refer to the different phases that a React component goes through during its existence. These stages are important to understand because they allow developers to control the behavior of their components and optimize their performance. There are three main stages in the React lifecycle: mounting, updating, and unmounting.

The mounting stage is the first stage in the React lifecycle. During this stage, the component is created and inserted into the DOM. The constructor method is called first, followed by the render method, which returns the JSX that will be displayed on the screen. After the render method is called, the componentDidMount method is called, which is where any additional setup or initialization can be done. For example, this is where you might make an API call to fetch data that the component needs to display.

The updating stage is the second stage in the React lifecycle. This stage is triggered whenever the component's props or state change. When this happens, the render method is called again to update the component's display. After the render method is called, the componentDidUpdate method is called, which is where any additional updates or side effects can be performed. For example, this is where you might update the component's state based on the new props that were passed in.

The unmounting stage is the final stage in the React lifecycle. This stage is triggered when the component is removed from the DOM. The componentWillUnmount method is called during this stage, which is where any cleanup or teardown can be performed. For example, this is where you might remove any event listeners that were added during the mounting stage.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    console.log('Component mounted');
  }

  componentDidUpdate() {
    console.log('Component updated');
  }

  componentWillUnmount() {
    console.log('Component unmounted');
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })>Increment</button>
      </div>
    );
  }
}

In the example above, we have a simple React component that demonstrates the three lifecycle stages. The constructor method sets the initial state of the component, which is a count of 0. The componentDidMount method logs a message to the console when the component is mounted. The componentDidUpdate method logs a message to the console when the component is updated. The componentWillUnmount method logs a message to the console when the component is unmounted. The render method returns a div that displays the current count and a button that increments the count when clicked.