Lifecycle methods in React.js are special methods that allow you to hook into different stages of a component’s life. They are used primarily in class components to perform actions at specific points during a component's existence, such as when it is created, updated, or destroyed.

Key Lifecycle Methods

1. Mounting

• constructor(props):

  • Called when the component is initialized. It is used to set up initial state and bind methods.

  constructor(props) {
    super(props);
    this.state = { counter: 0 };
  }
  

• static getDerivedStateFromProps(nextProps, prevState):

  • Invoked right before rendering, both on the initial mount and on subsequent updates. It is used to update state based on props.

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.value !== prevState.value) {
      return { value: nextProps.value };
    }
    return null;
  }
  

• componentDidMount():

  • Called after the component is mounted (i.e., inserted into the DOM). It is commonly used to perform initial data fetching or setup.

  componentDidMount() {
    // Fetch data or perform other side effects
  }
  

2. Updating

• shouldComponentUpdate(nextProps, nextState):

  • Called before rendering when new props or state are received. It allows you to optimize performance by preventing unnecessary renders.

  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.value !== this.props.value;
  }
  

• render():

  • The required method in every class component. It returns the JSX that defines the component’s UI.

  render() {
    return <div>{this.state.counter}</div>;
  }
  

• getSnapshotBeforeUpdate(prevProps, prevState):

  • Called right before the changes from the virtual DOM are committed to the real DOM. It allows you to capture some information (like scroll position) from the DOM before the update.

  getSnapshotBeforeUpdate(prevProps, prevState) {
    return this.myRef.scrollHeight;
  }
  

• componentDidUpdate(prevProps, prevState, snapshot):

  • Called immediately after updating occurs. It is used to perform operations after the DOM has been updated, such as data fetching or interacting with the DOM.

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (prevProps.value !== this.props.value) {
      // Perform some action
    }
  }
  

3. Unmounting

• componentWillUnmount():
  • Called immediately before a component is removed from the DOM. It is used for cleanup tasks like invalidating timers or canceling network requests.

  componentWillUnmount() {
    // Cleanup tasks
  }
  

4. Error Handling

• componentDidCatch(error, info):
  • Called when an error occurs in a descendant component. It is used to handle errors and display fallback UI.

  componentDidCatch(error, info) {
    // Handle the error
  }
  

Lifecycle Methods in Functional Components

In functional components, lifecycle methods are handled using Hooks, which provide similar functionality:

• useEffect:
  • Replaces componentDidMount, componentDidUpdate, and componentWillUnmount. You can specify what to run on mount, update, or cleanup.

  import React, { useEffect, useState } from 'react';
  
  function MyComponent() {
    const [data, setData] = useState(null);
  
    useEffect(() => {
      // Fetch data or setup
  
      return () => {
        // Cleanup
      };
    }, []); // Empty dependency array means this runs once on mount and cleanup on unmount
  
    return <div>{data}</div>;
  }
  

Summary

Lifecycle methods in React class components allow you to hook into various stages of a component’s life, from initialization to destruction. They are essential for managing side effects, optimizing performance, and handling errors. In functional components, similar functionality is achieved using hooks like useEffect. These lifecycle methods and hooks provide fine-grained control over component behavior and help ensure that applications run efficiently and correctly.