React JS lifecycle methods order in Mounting

Every component in React has to go through three phases that are Mounting, Updating, and Unmounting. These are called lifecycle methods in react.js. Out of the three, mounting is the first phase in the life cycle.

There four methods which come under the mounting phase are:

Prerequisites:

• Node JS or NPM
• React JS

Steps to Create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app project

Step 2: After creating your project folder(i.e. project), move to it by using the following command:

cd project

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

1. Constructor():

The constructor() method is called with the props. It inherits the properties and method from the parent constructor.

In this file, we are creating a constructor with props as arguments, we are inheriting the properties using super(props). We are creating a state name with the value ‘user’. We are calling the state further in our <h1> tags.

Example: This is a simple example illustrating state name with the value ‘user’:

Javascript

import React, { Component } from "react";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = { name: 'user' };
    }
    render() {
        return (
            <div className="App">
                <h1>Welcome {this.state.name}</h1>
            </div>
        );
    }
}

export default App

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output:

2. getDerivedStateFromProps():

The method getDerivedStateFromProps() takes the state as an argument and returns null or object with changes to the state.

Example: In this example, we are creating a static getDerivedStateFromProps() that changes the state name from ‘user’ to ‘newUser’.

Javascript

import React, { Component } from "react";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = { name: 'user' };
    }
    static getDerivedStateFromProps(props) {
        return { name: 'newUser' };
    }
    render() {


        return (
            <div className="App">
                <h1>Welcome {this.state.name}</h1>
            </div>
        );
    }
}

export default App

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output:

3. render():

The render() method outputs the HTML to the DOM.

Example: In this example, we are just showing a text within a header tag.

Javascript

import React, { Component } from "react";

class App extends Component {
    render() {
        return (
            <div className="App">
                <h1>Welcome Geek</h1>
            </div>
        );
    }
}

export default App

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output:

4. componentDidMount():

After the component is rendered the componentDidMount() gets called.It works when the element is already in the DOM.

Example: In this example, we are creating a componentDidMount() with a function setTimeout which changes the state name from ‘user’ to ‘GeekUser’ after 2 seconds.

Javascript

import React,{Component} from "react";

class App extends Component {
   constructor(props) {
      super(props);
      this.state = {name:'user'};
   }
   componentDidMount() {
    setTimeout(() => {
      this.setState({name: "GeekUser"})
    }, 2000)
  }
render() {
   return (
      <div className="App">
        <h1>Welcome {this.state.name}</h1>
      </div>
     );
   }
 }

export default App

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output:

How can we find the order of lifecycle methods in mounting?

In this, the example we are adding all four functions together. First, we are creating a constructor that will have the console.log message, then we are creating a static getDerivedStateFromProps() which will also show a message at the console and it returns null.

For the render() and ComponentDidMount() methods we are also adding some text to see in the console.

Example: After running the code, the order in which the messages associated with methods appear in the console is the order they follow during mounting.

Javascript

import React from "react";

class App extends React.Component {
    constructor(props) {
        super(props);
        console.log("This is Constructor");
        this.state = { color: 'red' };
    }
    static getDerivedStateFromProps() {
        console.log("getDerivedStateFromProps()");
        return null;

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

        return (
            <div></div>
        );
    }
}

export default App

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: