ReactJS lifecycle methods order in Mounting

Every Component in React goes through these three phases which are Mounting,Updating and Umounting. These phases overall are known as Lifecycle methods in react js. Out of the three, mounting is the first phase in the life cycle.Every component in react goes through lifecycle phases, But the functional components make use of the concept of hooks to achieve the same functionality of lifecycle methods with hooks.

There are four methods that fall under the mounting phase those methods are:

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

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

• Constructor 

The constructor() method is called before calling anything else. when the react components is initiated, and it is the natural place to set up the initial state and other initial values.

The constructor() method is called with the props, as arguments, and you should always start by calling the super(props) before anything else, this will initiate the parent’s constructor method and allows the react components to inherit methods from its parent (React.Component).

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

Here, the constructor method gets called whenever we make a component.

•  getDerivedStateFromProps

The getDerivedStateFromProps() method is called right before the element is rendered in the DOM.

This is the essential place to set the react state object based on the initial props(properties).

It takes react state as an argument, and returns an react object with changes to the react state.

The example below starts with the favorite color being “red”, but the react getDerivedStateFromProps() method updates the favorite color based on the favcol attribute:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  static getDerivedStateFromProps(props, state) {
    return {favoritecolor: props.favoritecolor };
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}
ReactDOM.render(<Header favoritecolor="yellow"/>, document.getElementById('root'));

• Render() 

The react render() method is required, and is the method that actually outputs the HTML to the DOM.

• componentDidMount

The componentDidMount() method allows us to execute the code when the component is already placed in the DOM (Document Object Model). This react method is called during the Mounting phase of the React Life-cycle i.e after the component is rendered.

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "yellow"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "red"})
    }, 1000)
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}
ReactDOM.render(<Header />, document.getElementById('root'));

In the above code we are we are updating the state after 1 second using the setTimeout method from javascript. The setTimeout function is called inside ComponentDidMount() method which lets us execute the code after a certain time and when the component is already placed within the DOM

OutPut