React Components Lifecycle

Initialization Phase

The initialization method is the phase in which the component is created. Inside the constructor method, the state and props are set up, resulting in the launch of the component’s journey.

Code:

import React from "react";

class App extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     name: "Coding Ninjas",
   };
   this.changeState = this.changeState.bind(this) 
 }

 changeState() {
     this.setState({ name: "Coding Ninjas Studio"});
 }
}

Mounting Phase

This stage comes right after the initialization stage is completed. In this phase, the React component is mounted on DOM (Document Object Model). In other words, the React component is created and inserted into the DOM. The component renders for the first time in this phase.

There are two methods in this phase, they are:

1. componentWillMount()
2. componentDidMount()

componentWillMount()

This method is invoked just before a component is mounted on the DOM, or when  the render method is called. After the invocation of this method, the component will get mounted on the DOM.

Here, we must note that we cannot update the state with API(Application Programming Interface) response. Avoid making API calls or changing data using this.setstate inside this method since this method is called before the render method. As it is not mounted on the DOM,  updating the data with API response cannot be done.

componentDidMount()

This method is invoked right after the component gets mounted on the DOM. Calling the render method before the execution of the componentDidMount method lets us access the DOM. Inside this method, we can make API calls and update the state with the API response. Just like the componentWillMount method, this method will be called only once in a lifecycle.

Consider the following code snippet to understand the above-mentioned methods.

Code:

componentWillMount() {
   console.log("componentWillMount()");
 }
componentDidMount() {
   console.log("componentDidMount()");
 }

Updating Phase

This is the third stage of a component’s lifecycle. This phase comes after the mounting phase of the component is completed. In the updating phase, the state of the component is changed. 

The main goal of this phase is to make sure that whenever a user event occurs, the state and props of the component will get updated. User events may be simple events like clicking, typing, etc. The data of the component is updated as a response to such user events. As a result, the component gets re-rendered. Three methods are available in this phase, they are:

1. shouldComponentUpdate()
2. componentWillUpdate()
3. compnentDidUpdate()

shouldComponentUpdate()

We use this method to know if a component’s output is not affected by the current change in state or props. In other words, this method is used to decide whether the component should be updated or not. It is invoked before rendering when new props or states are being received. By default, it returns a true value. This method is mainly used for performance optimization. It receives arguments nextProps and nextState to check whether to re-render by comparing with the current prop value.

Also check out - Phases of Compiler

componentWillUpdate()

After the shouldComponentUpdate method is executed, componentWillUpdate method is called. This method is invoked before re-rendering the component. This method also receives arguments nextProps and nextState. There may arise situations where you might want to perform some calculations before re-rendering the component. After updating the state and props such calculations can be included inside this method.

componentDidUpdate()

This method is invoked after re-rendering the component. The componentDidUpdate method is executed after the component gets updated on the DOM. This method receives arguments prevProps and prevState.

The updating methods are shown in the following code snippet.

Code:

shouldComponentUpdate(nextProps, nextState) {
    console.log("shouldComponentUpdate()");
    return this.state.name!==nextState.name
  }
​
  componentWillUpdate(nextProps, nextState) {
    console.log("componentWillUpdate()");
  }
​
  componentDidUpdate(nextProps, nextState) {
    console.log("componentDidUpdate()");
  }

Unmounting Phase

Unmounting phase is the final stage in the lifecycle of a component in ReactJS. In this phase, the component gets unmounted from the DOM. The method available in this phase is componentWillUnmount().

componentWillUnmount()

This method provides us with a function to unmount the components. It is invoked before unmounting of the component occurs. After its execution, the component will be removed from the DOM. 

After using this method, the lifecycle of that component comes to an end.

The lifecycle methods of a component can be represented as shown in the flowchart.

Lifecycle methods of a component 

Let’s see the complete code and it's working.

Code:

import React from "react";

class App extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     name: "Coding Ninjas",
   };
   this.changeState = this.changeState.bind(this) 
 }
 componentWillMount() {
   console.log("componentWillMount()");
 }
 componentDidMount() {
   console.log("componentDidMount()");
 }
 changeState() {
     this.setState({ name: "Coding Ninjas Studio"});
 }
 render() {
   return (
     <div>
       <h1>{this.state.name}</h1>
       <button onClick = {this.changeState}>Click Here!</button>        
     </div>
   );
 }
 shouldComponentUpdate(nextProps, nextState) {
   console.log("shouldComponentUpdate()");
   return this.state.name!==nextState.name
 }
 componentWillUpdate(nextProps, nextState) {
   console.log("componentWillUpdate()");
 }
 componentDidUpdate(nextProps, nextState) {
   console.log("componentDidUpdate()");
 }
}

export default App;

Output

Console 

Frequently Asked Questions

1. What is the React components lifecycle?

Ans:- The components in React go through certain stages and follow a cycle in the same way as everything else in the world does. This lifecycle is called the React components lifecycle. The React components lifecycle l can be categorized into four parts: Initialization, Mounting, Updating, and Unmounting.

2. What is the Initialization phase in React JS?

Ans:- The initialization method is the phase in which the component is created.

3. What are the two methods in the mounting phase?

Ans:- The two methods in the mounting phase are componentWillMount() and componentDidMount().

Key Takeaways

The React component lifecycle goes through four stages in its lifecycle. The initialization phase is when the component starts its journey by setting up its state and props. The mounting phase is the stage where the component is mounted on the DOM. It contains two methods. The updating phase is where the state of the component is changed based on user events. The unmounting phase is the final stage, after which the component is removed from the DOM.

You can also consider our React Js Course to give your career an edge over others.