React Component Lifecycle - Update Phase

As we have seen the basics of the React Component Lifecycle, lets get into the action!

We have seen how mounting phase works already. Today we will look into the update phase. As discussed earlier, there are 2 major methods:

• render
• componentDidUpdate

In react, the calling sequence is render 🠊 (Children Render) 🠊 componentDidUpdate.

Lets look at an example:

  class ReactLifecycle extends React.Component {

    constructor() {

        super();

        this.state = {

        clickCount: 0,

        };

        this.incrementHandler = this.incrementHandler.bind(this);

        this.resetHandler = this.resetHandler.bind(this);

    }

    incrementHandler = (event, name) => {

        console.log("clickCount is incremented by One...");

        const newClickCount = this.state.clickCount + 1;

        this.setState({ clickCount: newClickCount });

    };

    resetHandler = () => {

        console.log("clickCount is reset to Zero..");

        const newClickCount = 0;

        this.setState({ clickCount: newClickCount });

    };

    componentDidUpdate() {

        console.log("componentDidUpdate method of ReactLifecycle is called.");

    }

    render() {

        console.log("Render method of ReactLifecycle is called.");

        return (

        <>

            <h1>Hello, Total clicks are {this.state.clickCount}</h1>

            <button className="btn" onClick={(event) => this.incrementHandler()}>

            Click Now to increment!

            </button>

            <button className="btn" onClick={(event) => this.resetHandler()}>

            Reset Count!

            </button>

        </>

        );

    }

    }

    const rootElement = document.getElementById("root");

    ReactDOM.render(<ReactLifecycle />, rootElement);

Output:

• Notice the sequence in which the messages were logged in the console:

• render()

• componentDidUpdate()

• The additional logs we are seeing are coming from the vent handler method so you could notice that the componentDidUpdate is called when a state changes.

• When the component was mounted initially, it was rendered as we have seen earlier in Mounting phase.

• Post that whenever clickCount (state) changed, render() method is called to re-render the UI followed by the componentDidUpdate() method.

• componentDidUpdate() 
• This method is called after component is updated with new state or props.
• we can compare new state with old state or new props with old props in this method.
• In case of change in state, we can make Ajax call to the server to refresh our data.
• It is recommended to make Ajax calls only if We want to avoid Ajax unless a state has changed

• Please note that when a component is re-rendered as a part of Update, all of its children are also rendered recursively.

• 

• As you can see, child component is rendered before componentDidUpdate  of parent is called.

• 
  

      class ReactLifecycle extends React.Component {

      constructor() {

          super();

          this.state = {

          clickCount: 0,

          };

  
  

          this.incrementHandler = this.incrementHandler.bind(this);

  
  

          this.resetHandler = this.resetHandler.bind(this);

      }

  
  

      incrementHandler = (event, name) => {

          // console.log("clickCount is incremented by One...");

          const newClickCount = this.state.clickCount + 1;

          this.setState({ clickCount: newClickCount });

      };

  
  

      resetHandler = () => {

          // console.log("clickCount is reset to Zero..");

          const newClickCount = 0;

          this.setState({ clickCount: newClickCount });

      };

  
  

      componentDidUpdate() {

          console.log("componentDidUpdate method of ReactLifecycle is called.");

      }

  
  

      render() {

          console.log("Render method of ReactLifecycle is called.");

          return (

          <>

              <Child />

              <h1>Hello, Total clicks are {this.state.clickCount}</h1>

  
  

              <button className="btn" onClick={(event) => this.incrementHandler()}>

              Click Now to increment!

              </button>

              <button className="btn" onClick={(event) => this.resetHandler()}>

              Reset Count!

              </button>

          </>

          );

      }

      }

  
  

      const Child = () => {

      console.log("Inside Child");

      return (

          <>

          <h2>Child</h2>

          </>

      );

      };

  
  

      const rootElement = document.getElementById("root");

      ReactDOM.render(<ReactLifecycle />, rootElement);