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:
- Knowledge about react.js
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.
