In React, class components have a set of lifecycle methods that allow you to perform actions at different points in the component's life. These methods can be categorized into three phases: Mounting, Updating, and Unmounting. Here is a list of the most commonly used lifecycle methods:

Mounting:

  1. constructor()
    • This is the first method called when a component is created.
    • It is used for initializing state and binding event handlers.
  2. static getDerivedStateFromProps(props, state)
    • This method is called before every render.
    • It returns an object to update the state or null to indicate that the new props do not require any state updates.
  3. render()
    • This is where the UI for the component is defined.
    • It is a required method.
  4. componentDidMount()
    • This method is called after the component is rendered to the DOM.
    • It is often used for data fetching or setting up subscriptions.

Updating:

  1. static getDerivedStateFromProps(props, state)
    • This method is also called during the update phase, just like in the mounting phase.
  2. shouldComponentUpdate(nextProps, nextState)
    • It is called before rendering when new props or state are received.
    • It can be used to control whether the component should re-render.
  3. render()
    • Same as in the mounting phase, it defines the UI of the component.
  4. getSnapshotBeforeUpdate(prevProps, prevState)
    • This method is called right before the changes from the virtual DOM are to be reflected in the actual DOM.
    • It is often used to capture some information from the DOM, such as scroll position.
  5. componentDidUpdate(prevProps, prevState, snapshot)
    • This method is called after the component is updated in the DOM.
    • It is often used for performing side effects like network requests.

Unmounting:

  1. componentWillUnmount()
    • This method is called just before the component is removed from the DOM.
    • It is used for cleanup tasks, such as cancelling network requests or cleaning up subscriptions.

Error Handling:

  1. static getDerivedStateFromError(error)
    • This method is used to render a fallback UI after an error is thrown in a descendant component.
  2. componentDidCatch(error, info)
    • This method is used to log the error information.

 

Please note that with the introduction of React Hooks in React 16.8, functional components can also manage state and side effects, reducing the reliance on class components and lifecycle methods. If you are starting a new project or updating an existing one, you might want to consider using functional components and hooks.