Lifecycle:

All the React component's lifecycle methods can be split into four phases: initialization, mounting, updating and unmounting. The process where all these stages are involved is called the component's lifecycle and every React component goes through it.

Mounting Methods:

Mounting refers to putting elements into the DOM. React have four built-in methods that get called, in this order, when mounting a component:

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

The render() method is mandatory and will always be called whereas the others are optional and will be called if we define them.

constructor():

The constructor method is called by React, every time we make a component. However its only with the class components. We have seen it a lot of times.

getDerivedStateFromProps():

The getDerivedStateFromProps() method is called right before rendering the element(s) in the DOM. This is the natural place to set the state object based on the initial props. It takes state as an argument, and returns an object with changes to the state.

Consider the code below:

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

export default Header;

render():

The render() method is required, and is the method that actually outputs the HTML to the DOM. It’s also a specific method that is used in class components.

componentDidMount():

The componentDidMount() method is called after the component is rendered. This is where we run statements that require that the component is already placed in the DOM.

Consider the code below:

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

export default Header;

Updating methods:

The next phase in the lifecycle is when a component is updated. A component is updated whenever there is a change in the component's state or props. That is why we have invoked the two basic methods new props and setState() for update stage in the diagram discussed above.

Following are five methods of update stage:

getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

getDerivedStateFromProps():

Also at updates the getDerivedStateFromProps method is called. This is the first method that is called when a component gets updated.

Consider the code below:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  static getDerivedStateFromProps(props, state) {
    return {favoritecolor: props.favcol };
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

export default Header;

shouldComponentUpdate():

In the shouldComponentUpdate() method we can return a Boolean value that specifies whether React should continue with the rendering or not. The default value is true.

Consider the code below:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  
shouldComponentUpdate() {
    return false;
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

export default Header;

render():

The render() method is of course called when a component gets updated, it has to re-render the HTML to the DOM, with the new changes.

Consider the code below:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

export default Header;

getSnapshotBeforeUpdate():

In the getSnapshotBeforeUpdate() method we have access to the props and state before the update, meaning that even after the update, we can check what the values were before the update.

If the getSnapshotBeforeUpdate() method is present, we should also include the componentDidUpdate() method, otherwise we will get an error.

Consider the code below:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    document.getElementById("div1").innerHTML =
    "Before the update, the favorite was " + prevState.favoritecolor;
  }
  componentDidUpdate() {
    document.getElementById("div2").innerHTML =
    "The updated favorite is " + this.state.favoritecolor;
  }
  render() {
    return (
      <div>
        <h1>My Favorite Color is {this.state.favoritecolor}</h1>
        <div id="div1"></div>
        <div id="div2"></div>
      </div>
    );
  }
}

export default Header;

componentDidUpdate():

The componentDidUpdate method is called after the component is updated in the DOM.

Consider the code below:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  componentDidUpdate() {
    document.getElementById("mydiv").innerHTML =
    "The updated favorite is " + this.state.favoritecolor;
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <div id="mydiv"></div>
      </div>
    );
  }
}

export default Header;

Unmounting methods:

The next phase in the lifecycle is when a component is removed from the DOM, or unmounting as React likes to call it. React has only one built-in method that gets called when a component is unmounted:

componentWillUnmount():

The componentWillUnmount method is called when the component is about to be removed from the DOM.

Consider the codes below:

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = {show: true};
  }
  delHeader = () => {
    this.setState({show: false});
  }
  render() {
    let myheader;
    if (this.state.show) {
      myheader = <Child />;
    };
    return (
      <div>
      {myheader}
      <button type="button" onClick={this.delHeader}>Delete Header</button>
      </div>
    );
  }
}

export default Header;

class Child extends React.Component {
  componentWillUnmount() {
    alert("The component named Header is about to be unmounted.");
  }
  render() {
    return (
      <h1>Hello World!</h1>
    );
  }
}

export default Child;