Discover the lifecycle events in React and learn how to effectively use them.

React class components have hooks for various lifecycle events. One of the advantages of React is that it allows function components to access these events as well, albeit in a different way.

Throughout a component’s lifetime, there are several events that get called, and each event provides an opportunity to hook into and provide custom functionality.

Let’s delve into the three main phases of a React component lifecycle: Mounting, Updating, and Unmounting.

Mounting

During the mounting phase, there are four lifecycle methods that get called before the component is mounted in the DOM: constructor, getDerivedStateFromProps, render, and componentDidMount.

  1. Constructor: The constructor is the first method that gets called when mounting a component. It is typically used to set up the initial state using this.state = ....

  2. getDerivedStateFromProps(): This method is useful when the component’s state depends on its props. It allows you to update the state based on the props value. Introduced in React 16.3, it aims to replace the deprecated componentWillReceiveProps method. It is a static method and does not have access to this. It should be a pure method, meaning it should not cause any side effects and should return the same output when called multiple times with the same input. It returns an object with the updated elements of the state or null if the state remains unchanged.

  3. render(): The render() method returns the JSX that builds the component interface. Again, it should be a pure method and return the same output when called multiple times with the same input.

  4. componentDidMount(): This method is commonly used to perform API calls or process operations on the DOM. It is called after the component has been mounted in the DOM.

Updating

During the updating phase, there are five lifecycle methods called before the component is updated in the DOM: getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate, and componentDidUpdate.

  1. getDerivedStateFromProps(): See the description provided above.

  2. shouldComponentUpdate(): This method returns a boolean value, either true or false. It allows you to determine if React should proceed with the rerendering. By default, it returns true. You would return false when rerendering is expensive and you want more control over when it occurs.

  3. render(): See the description provided above.

  4. getSnapshotBeforeUpdate(): This method provides access to the props and state of the previous and current renders. It has niche use cases and is typically used less frequently.

  5. componentDidUpdate(): This method is called when the component has been updated in the DOM. It is suitable for performing tasks such as running 3rd party DOM API calls or updating APIs that depend on DOM changes. It corresponds to the componentDidMount() method from the mounting phase.

Unmounting

In the unmounting phase, there is only one method: componentWillUnmount().

  1. componentWillUnmount(): This method is called when the component is being removed from the DOM. It allows you to perform any necessary cleanup tasks.

Legacy

If you are working on an app that uses the deprecated methods componentWillMount, componentWillReceiveProps, or componentWillUpdate, it is recommended to migrate to other lifecycle methods as they were deprecated in React 16.3.

Tags: React, Lifecycle, Mounting, Updating, Unmounting