What are React Component Lifecycle phases with examples?

Understanding Component lifecycle is a must for any React developer. A React component has a life cycle that it goes through and here are the main phases:

1. Initialization

This is the phase where the component is set up and the initial state is defined. It includes the following events:

• The constructor() method of the component is called to set up the initial state and bind event handlers to the instance.
• The getDerivedStateFromProps() method is called to update the state based on the props that were passed to the component.

2. Mounting

This is the phase where the component is added to the DOM for the first time. It includes the following events:

• The render() method is called to generate the JSX for the component.
• The component is added to the DOM.
• The componentDidMount() method is called to indicate that the component has mounted and this is developers can run their code. This is what developers commonly use to interact with this phase.

3. Updating

This is the phase where the component is updated due to changes in the props or state. It includes the following events:

• The shouldComponentUpdate(nextProps, nextState) method is called to determine whether the component should be updated or not. It returns true by default, but allows you to exit the Update life cycle phase to prevent unnecessary renders.
• If the component should be updated, the render() is called again to generate the updated JSX.
• The getSnapshotBeforeUpdate() method is called to capture information from the DOM before it is updated.
• The component is updated in the DOM.
• The componentDidUpdate() method is called to indicate that the component has finished updating and this where you can run your code. This is what developers commonly use to interact with this phase.

4. Unmounting

This is the phase where the component is removed from the DOM. It includes the following event:

• The componentWillUnmount() method is run to perform any necessary cleanup before the component is unmounted and destroyed. Clean up may include things like invalidating timers, closing network requests, etc. You should not set the state in this component as it will have no effect because the component will never to re-rendered.

The above examples are for Class-based components. In Functional React components, you don’t have access to the same lifecycle methods but you can use the useEffect hook to achieve the same. You can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

Here’s how to use it:

  useEffect(() => {
    // This is equivalent to componentDidMount()
    console.log('The component has mounted!');
    return () => {
      // This is equivalent to componentWillUnmount()
      console.log('The component is about to unmount!');
    };
  }, []); // The empty array is to tell useEffect to only run the effect once

  useEffect(() => {
    // This is equivalent to componentDidUpdate()
    console.log('The state has been updated!');
  }, [stateVariable]); // The array tells useEffect() to only run the effect when stateVariable changes

Hope this helps.

Related Questions