Skip to content
Related Articles

Related Articles

ReactJS lifecycle methods order in Mounting

View Discussion
Improve Article
Save Article
  • Last Updated : 27 May, 2022

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 are four methods that fall under this phase those methods are:

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

Out of the four render() is a mandatory method whereas the others are optional.

Prerequisites:

Creating React application:

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: It will look like this.

Note: Learn all four methods one by one by changing code in the App.js file.

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

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

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

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

Now, open the inspector Ctrl + Shift + C and click on the console tab.

Output:

We can see this is the order of the life cycle method in mounting.First mounts the constructor() method then the getDerivedStateFromProps() method, followed by render() method and then componentDidMount() method.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!