Flat Preloader Icon

React Component Lifecycle

React component lifecycle refers to the series of phases that a React component goes through from its creation to its destruction. This lifecycle is divided into three main phases for class components: Mounting, Updating, and Unmounting. Each phase provides specific lifecycle methods that you can use to hook into the process and execute code at different points.

Lifecycle Phases for Class Components

  1. Mounting Phase
  2. Updating Phase
  3. Unmounting Phase

Mounting

Mounting is the phase when a component is being created and inserted into the DOM. The lifecycle methods called during this phase are:

1. constructor(props):

  • Purpose: Initialize the component’s state and bind event handlers.
  • When Called: Before the component is mounted.

2. static getDerivedStateFromProps(props, state):

  • Purpose: Update the state based on props before rendering.
  • When Called: Before render() method, both on initial mount and updates.
  • Returns: An object to update state or null.

3. render():

  • Purpose: Returns the JSX that describes the UI.
  • When Called: During the mounting phase and when state or props change.

4. componentDidMount():

  • Purpose: Perform side-effects such as data fetching or setting up subscriptions.
  • When Called: Immediately after the component is mounted.
				
					import React from 'react';

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

  static getDerivedStateFromProps(props, state) {
    return null; // Or update state based on props
  }

  componentDidMount() {
    console.log('Component did mount');
  }

  render() {
    return <div>Count: {this.state.count}</div>;
  }
}

				
			

Updating

Updating occurs when a component’s state or props change. The lifecycle methods called during this phase are:

1. static getDerivedStateFromProps(props, state):

  • Purpose: Same as in mounting; updates state based on props before rendering.

2. shouldComponentUpdate(nextProps, nextState):

  • Purpose: Decide whether the component should re-render.
  • When Called: Before render() method, on state or prop changes.
  • Returns: true to update or false to skip.

3. render():

  • Purpose: Re-render the component with updated state or props.

4. getSnapshotBeforeUpdate(prevProps, prevState):

  • Purpose: Capture information from the DOM before it is updated.
  • When Called: Right before the latest render output is committed.
  • Returns: A snapshot value to be used in componentDidUpdate().

5. componentDidUpdate(prevProps, prevState, snapshot):

  • Purpose: Perform side-effects based on the changes.
  • When Called: Immediately after the component is updated.
				
					import React from 'react';

class MyComponent extends React.Component {
  static getDerivedStateFromProps(nextProps, prevState) {
    return null; // Update state based on props
  }

  shouldComponentUpdate(nextProps, nextState) {
    return true; // Decide if re-render is needed
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    return null; // Capture some information from the DOM
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('Component did update');
  }

  render() {
    return <div>Count: {this.state.count}</div>;
  }
}

				
			

Unmounting

Unmounting is the phase where a component is removed from the DOM. The lifecycle method called during this phase is:

1. componentWillUnmount():

  • Purpose: Clean up resources like timers, subscriptions, or network requests.
  • When Called: Immediately before the component is unmounted and destroyed.
				
					import React from 'react';

class MyComponent extends React.Component {
  componentWillUnmount() {
    console.log('Component will unmount');
  }

  render() {
    return <div>Count: {this.state.count}</div>;
  }
}

				
			
React’s lifecycle methods provide control over different stages of a component’s existence, allowing you to manage state, perform side-effects, and handle errors. With the introduction of hooks, functional components now offer a more flexible and powerful way to handle lifecycle events and side-effects.