Phase 4: Unmounting

Unmounting is the last phase of the ReactJS component lifecycle. This phase includes those lifecycle methods which are used when a component is getting detached from the DOM container. It is also responsible for performing the required cleanup tasks. Once unmounted, a component can not be re-mounted again. 

  • componentWillUnmount(): The method invoked immediately before the component is removed from the DOM at last, i.e. right when the component is completely removed from the page and this shows the end of its lifecycle.

What are the different phases of ReactJS component lifecycle ?

In React JS, the development of each component involves the use of different lifecycle methods. All the lifecycle methods used to create such components, together constitute the component’s lifecycle. They are defined as a series of functions invoked in various stages of a component.

There are primarily 4 phases of a lifecycle as follows.

Table of Content

  • Initializing 
  • Mounting
  • Updating
  • Unmounting

Similar Reads

Phase 1: Initializing

This is the initial phase of the React component lifecycle. As the name suggests, this phase involves all the declarations, definitions, and initialization of properties, default props as well as the initial state of the component required by the developer....

Phase 2: Mounting

The second phase of the React component lifecycle, followed by the initialization phase, is the mounting phase. It commences when the component is positioned over the DOM container and rendered on a webpage. It consists of 2 methods, namely:...

Phase 3: Updating

The third phase of the ReactJS Component Lifecycle is the Updation phase. It is also responsible for handling user interaction and passing data within the component hierarchy. Some of the lifecycle methods falling into this category are as follows:...

Phase 4: Unmounting

Unmounting is the last phase of the ReactJS component lifecycle. This phase includes those lifecycle methods which are used when a component is getting detached from the DOM container. It is also responsible for performing the required cleanup tasks. Once unmounted, a component can not be re-mounted again....

Steps to create React Application And Installing Module:

Step 1: Create a new react application using the following command:...