React component lifecycle

image credit: link

In React, the component lifecycle refers to the series of phases that a React component goes through, from birth to death. Each phase offers specific lifecycle methods that developers can use to perform actions at different points in the component’s existence.

The react lifecycle can be broadly divided into three main phases:

• Mounting
• Updating
• Unmounting

Mounting Phase:

(1) constructor:

• Called when an instance of the component is being created.
• Used for initializing state and binding event handlers.

constructor(props) {
  super(props);
  this.state = {
    // initialize state
  };
}

(2) static getDerivedStateFromProps:

• Invoked right before calling the render method.
• Used for updating state based on changes in props.

static getDerivedStateFromProps(nextProps, prevState) {
  // return an object to update state or null to indicate no changes
}

(3) render:

• Responsible for rendering the component.
• Should be a pure function with no side effects.

render() {
  return (
    // JSX representing the component's UI
  );
}

(4) componentDidMount:

• Invoked immediately after a component is mounted.
• Used for side effects, such as AJAX requests or initializing third-party libraries.

componentDidMount() {
  // perform actions after the component is mounted
}

Updating Phase:

(1) static getDerivedStateFromProps:

• Also called during the updating phase when new props are received.
• Similar to the mounting phase usage.

(2) shouldComponentUpdate:

• Called before rendering when new props or state are received.
• Allows developers to control whether the component should re-render.

shouldComponentUpdate(nextProps, nextState) {
  // return true if the component should update, false otherwise
}

(3) render:

• Re-renders the component if shouldComponentUpdate returns true.

(4) getSnapshotBeforeUpdate:

• Called right before the changes from the virtual DOM are to be reflected in the DOM.
• Used for capturing information (e.g., scroll position) before the update.

getSnapshotBeforeUpdate(prevProps, prevState) {
  // return a value that will be passed as the third parameter to componentDidUpdate
}

(5) componentDidUpdate:

• Invoked immediately after the component is updated.
• Useful for performing actions after the component re-renders.

componentDidUpdate(prevProps, prevState, snapshot) {
  // perform actions after the component is updated
}

Unmounting Phase:

(1) componentWillUnmount:

• Called right before the component is unmounted and destroyed.
• Used for cleanup, such as cancelling network requests or clearing timers.

componentWillUnmount() {
  // perform cleanup before the component is destroyed
}

Error Handling:

(1) static getDerivedStateFromError:

• Invoked when there is an error during rendering, in a lifecycle method, or in the constructor.
• Used for updating state in response to an error.

static getDerivedStateFromError(error) {
  // update state based on the error
}

(2) componentDidCatch:

• Invoked after an error has been thrown during rendering or in a lifecycle method.
• Used for logging errors or displaying a fallback UI.

componentDidCatch(error, errorInfo) {
  // log the error or display a fallback UI
}

These lifecycle methods provide hooks for developers to execute code at specific points in a component’s lifecycle, allowing for effective management of state, side effects, and component behavior.

It’s worth noting that with the introduction of React Hooks, some class-based lifecycle methods may not be used in functional components, and instead, the useEffect and other hooks are employed for managing lifecycle-related tasks.