React Component Life-Cycle

In ReactJS, each and every component creation process involves various lifecycle methods. These lifecycle methods are termed react components lifecycle. These components lifecycle methods are not very complicated and are called at various points during a react component’s life. The lifecycle of the react component is divided into four phases. They are:

Initial Phase
Mounting Phase
Updating Phase
Unmounting Phase

Initial Phase:

In this phase, the web developer has to define the props and initial state of the component this is generally done in the constructor of the react component. The following code snippet describes the react initialization process.

lass Clock extends React.Component {
       constructor(props)
       {
              // Calling the constructor of
              // Parent Class React.Component
              super(props);

              // Setting the initial state
              this.state = { date : new Date() };
       }
}

Mounting:

In this react phase, the instance of a react component is created and inserted into the DOM. It consists of the following methods.

1.componentWillMount() Function:
As the name clearly suggests, this js function is invoked right before the react component is mounted on the DOM(Document Object Model) i.e. this function gets invoked once before the react render() function is executed for the first time.

2.componentDidMount():
This is invoked immediately after a react component gets rendered and placed on the DOM(Document Object Model). Now, you can do any DOM(Document Object Model) querying operations.

3.render():

This method is defined in each and every react component. It is responsible for returning a single root HTML(HyperText Markup Language) node element. If you don’t want to render anything, you can return a null or false(error) value.

Updating Phase:

It is the react next phase of the lifecycle of a react. Here, we get new Props and change react State. This react phase also allows to handle user interaction and provide communication with the react components hierarchy. The main aim of this react phase is to ensure that the react component is displaying the latest new version of itself. Unlike the Birth or Death react phase, this phase repeats again and again. This react phase consists of the following methods.

1.ComponentWillRecieveProps():
It is invoked when a react component receives new props. If you want to update the state in response to prop changes, you should compare this.props and nextProps to perform react state transition by using this.setState() method.

componentWillReceiveProps(newProps)
{
     if (this.props !== newProps) {
              console.log(" New Props have been assigned ");
              // Use this.setState() to rerender the page.
     }
}

2. shouldComponentUpdate():

It is invoked when a component decides on any changes/updates to the DOM. It allows you to control the react component’s behavior of updating itself. If this method returns true, the react component will update. Otherwise, the react component will skip the updating.

3. componentWillUpdate() Function:

As the name clearly suggests, this js function is invoked before the react component is rerendered i.e. this function gets invoked once before the recat render() function is executed after the updation of State or Props.

4. componentDidUpdate() Function:

Similarly, this js function is invoked after the react component is rerendered i.e. this js function gets invoked once after the render() function is executed after the updation of State or Props.

Unmounting:

This is the final phase of the lifecycle of the component is the phase of unmounting the component from the DOM(Document Object Model).

1.componentWillUnmount():

This react method is invoked immediately before a react component is destroyed and unmounted permanently. It performs any necessary cleanup-related task such as invalidating timers, event listener, canceling network requests, or cleaning up DOM elements. If a react component instance is unmounted, you cannot mount it again.

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

class Test extends React.Component {
       constructor(props)
       {
              super(props);
              this.state = { hello : "World!" };
       }

       componentWillMount()
       {
            console.log("componentWillMount()");
       }

       componentDidMount()
       {
            console.log("componentDidMount()");
       }

       changeState()
       {
             this.setState({ hello : "Geek!" });
       }

       render()
       {
              return (
                      <div>
                      <h1>I2 tutorials, Hello{ this.state.hello }</h1>
                      <h2>
                      <a onClick={this.changeState.bind(this)}>Press Here!</a>
                      </h2>
                      </div>);
       }

       shouldComponentUpdate(nextProps, nextState)
       {
             console.log("shouldComponentUpdate()");
             return true;
       }

       componentWillUpdate()
       {
            console.log("componentWillUpdate()");
       }

       componentDidUpdate()
       {
            console.log("componentDidUpdate()");
       }
}

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