React Lifecycle Components

React Lifecycle Components | Mounting, Updating, Unmounting

In React, each component has a life-cycle which manipulate during its three main phases.

The following three phases are:
1.      Mounting
2.      Updating
3.      Unmounting

React does so by “Mounting” (adding nodes to the DOM), “Unmounting” (removing them from the DOM), and “Updating” (making changes to nodes already in the DOM).


Mounting - Lifecycle Phase 1
Mounting is used for adding nodes (elements) to the DOM.

The React has four built-in methods that gets called, in this order, when mounting a component -
1.      constructor()
2.      getDerivedStateFromProps()
3.      render()
4.      componentDidMount()

Note
1)      The render() method is required and It always be called and the others methods are optional (you will call if needed of them).
2)      These methods are considered legacy and you should avoid them in new code:
·       UNSAFE_componentWillMount()

The Constructor Method -
The constructor() method is called when the component is initiated (before anything else). Here we can set up the initial state and other initial values.

The constructor() method is called with the props, as arguments and we should always start by calling the super(props) before initiated anything else.

As an Example,
import React from 'react';

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {msg: "welcome!"};
  }
  render() {
    return (
      <h2>{this.state.msg} you anil</h2>
    );
  }
}

The getDerivedStateFromProps Method -
The getDerivedStateFromProps() method is called before rendering the elements in the DOM.

The getDerivedStateFromProps() method is called right before the render method and after the constructor method.

We can set the state object based on the initial props and it takes state as an argument, and returns an object with changes to the state.

We can update the constructor state in the getDerivedStateFromProps() method.

As an Example,
public class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {msg: "welcome!"};
  }

  static getDerivedStateFromProps(propsstate) {
    return {msg: props.yourMsg };
  }

  render() {
    return (
      <h1>{this.state.msgyou anil</h1>
    );
  }
}

The Render Method -
The render () method is used to display the actual outputs HTML to the DOM.
The render () method is required and this method has to return something whether it is null.

When Render method is called?
When render method is called it returns a new virtual DOM structure of the component.

As an Example,
import React from 'react';

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {msg: "welcome!"};
  }
  render() {
    return (
      <h2>{this.state.msg} you anil</h2>
    );
  }
}

As an another Example,

public class Header extends React.Component {
  render() {
    return (
      <h2>This one is a Header component</h2>
    );
  }
}


The componentDidMount Method -
The componentDidMount method is called after the component is rendered.
The componentDidMount method is called exactly once and when The component has been initialized.

The componentDidMount method is used for -
1.      Handling the AJAX requests - GET/POST/PUT/DELETE
2.      Set timers using setTimeout or setInterval
3.      Set timers using setInterval

As an Example,
public class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {msg: "welcome!"};
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({msg: "welcome you Anil"})
    }, 1000)
  }

  render() {
    return (
      <h2>{this.state.msg}</h2>
    );
  }
}

Updating - Lifecycle Phase 2
A component is updated whenever there is a change in the component's state or props.

These methods are called in the following order when a component is being re-rendered:
1)      getDerivedStateFromProps()
2)      shouldComponentUpdate()
3)      render()
4)      getSnapshotBeforeUpdate()
5)      componentDidUpdate()

Note:
1)      The render() method is required and will always be called, the others are optional and will be called if you define them.
2)      These methods are considered legacy and you should avoid them in new code:
o   UNSAFE_componentWillUpdate()
o   UNSAFE_componentWillReceiveProps()

The getDerivedStateFromProps Method -
The getDerivedStateFromProps() method is called first when a component gets updated. This is still the natural place to set the state object based on the initial props.

After changes the color to blue, but since the getDerivedStateFromProps() method is called, which updates the state with the color from the color attribute, the color is still rendered as yellow. 

See the below example,

class Header extends React.Component {
    constructor(props) {
      super(props);
      this.state = {color: "red"};
    }

    static getDerivedStateFromProps(propsstate) {
      return {color: props.color };
    }

    changeColor = () => {
      this.setState({color: "blue"});
    }

    render() {
      return (
        <div>
        <h1>Your Color is {this.state.color}</h1>
        <button type="button" onClick={this.changeColor}>Change this color</button>
        </div>
      );
    }
  }
  
  ReactDOM.render(<Header favcol="yellow"/>document.getElementById('root'));


Result of this example is – Your color is Yellow

The shouldComponentUpdate Method -
The shouldComponentUpdate() method is invoked before rendering (render method) when new props or state are being received.

The defaults value is true.

The shouldComponentUpdate() method is not called for the initial render or when forceUpdate() is used.

As an Example 1–

When shouldComponentUpdate value is fale? My Color is red after click on Change color.

import React from 'react';
import ReactDOM from 'react-dom';

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

ReactDOM.render(<Header />document.getElementById('root'));


Result of this example is – My color is red

As an Example 2–

When shouldComponentUpdate value is true? My Color is blue after click on Change color.

import React from 'react';
import ReactDOM from 'react-dom';

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {color: "red"};
  }

  shouldComponentUpdate() {
    return true;
  }

  changeColor = () => {
    this.setState({color: "blue"});
  }

  render() {
    return (
      <div>
      <h1>My Color is {this.state.color}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

ReactDOM.render(<Header />document.getElementById('root'));


Result of this example is – My color is blue

The Render Method -
The render() method is the only required method in a class component.

The render() method is called when a component gets updated and re-render the HTML to the DOM including the new changes.

Note: The render() will not be invoked if shouldComponentUpdate() returns false.

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

Result of this example is – My color is blue

The getSnapshotBeforeUpdate Method -
The getSnapshotBeforeUpdate() method is invoked right before calling the render method, both on the initial mount and on subsequent updates. It should return an object to update the state, or null to update nothing.

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

The componentDidUpdate Method -
The componentDidUpdate() method is called after the component is updated in the DOM. This method is not called for the initial render

Note: The componentDidUpdate() will not be invoked if shouldComponentUpdate() returns false.

Unmounting - Lifecycle Phase 3
The Unmounting is used when a component is removed from the DOM.

React has only one built-in method that is called when a component is unmounted.
1.      componentWillUnmount

The componentWillUnmount Method -
The componentWillUnmount() method is called when the component is removed from the DOM.

As an Example,
// container class
public class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = {show: true};
  }

  deleteHeader = () => {
    this.setState({show: false});
  }

  render() {
    let header;
    if (this.state.show) {
      header = <Child />;
    };
    return (
      <>
      <div>
        <p>{header}</p>
        <button type="button" onClick={this.deleteHeader}>Delete My Header</button>
      </div>
    );
  }
}

//Child class
public class Child extends React.Component {
  componentWillUnmount() {
    console.log("This component Header is unmounted.");
  }

  render() {
    return (
      <h1>Hello Anil!</h1>
    );
  }
}

ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.
^