Skip to main content

Mounting, Updating, and Unmounting phases

Introduction to React Component Lifecycle​

In the world of React, a component's lifecycle can be primarily thought of in three distinct phases - Mounting, Updating and Unmounting. During each of these phases, there are methods that get called, allowing developers to integrate their code at the right point in time. Understanding these phases and their methods is crucial in building and managing your application's components effectively.

Mounting​

Mounting is the phase in which our React component mounts on the DOM (i.e., being created and inserted into the DOM). This phase comes into play when an instance of a component is being created and inserted into the DOM itself. There are four built-in methods that are called, in this order, when mounting a component:

  • constructor()
  • static getDerivedStateFromProps()
  • render()
  • componentDidMount()

The constructor() method is called before anything else, when the component is initiated, and it is a good place to initialize our state.

The getDerivedStateFromProps() method is called right before rendering the element in our DOM and it is a good place to set the state object based on the initial props.

The render() method is required, and will always be called, it takes care of rendering your component to the UI.

And finally, the componentDidMount() method is called after the component is rendered. This is where you want to run statements that requires that the component is already placed in the DOM.

Updating​

The update phase is the phase where the component gets updated in two cases, sending the new props or updating the state. The methods that are called during this phase are:

  • static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()

The getDerivedStateFromProps() is the first method that's called during this phase as well, and it's followed by shouldComponentUpdate(). This method allows you to cancel the updating process. This is not typically recommended because it can lead to UI inconsistencies, but it can be useful in some cases.

The render() method is then called and it does what it says - it renders your component.

The getSnapshotBeforeUpdate() method has a very specific use case, which is rare. It allows you to capture some information from the DOM before it is potentially changed. Note that it should always be used with componentDidUpdate(), because it passes the value returned by it to componentDidUpdate().

The componentDidUpdate() method is called after the component is updated in the DOM. Any post-update logic should go here.

Unmounting​

As the name suggests, this is the phase where the component is not needed and gets unmounted from the browser DOM. The method that's called at this phase is componentWillUnmount().

The componentWillUnmount() method is called once the component is about to be removed from the DOM. If there are any cleanup actions that you would need to do, this would be the right spot.

Conclusion​

Understanding these lifecycle methods will allow you to write more efficient React code, and they give you a lot of control over what happens at each change in a component's life. From initialization to rendering to updating and finally unmounting, knowing which method to use can help you optimize your application's performance and make debugging much easier.