Class Components Lifecycle in React

In this article we will see what is react component lifecycle and different lifecycle methods.

As we know react web apps are a collection of independent components. Each component has its own lifecycle. Now, what are React component Lifecycle methods? Well in simple terms it can be defined as components that are created, grow by updating, and then die pretty much similar to the lifecycle of a living being.

Different methods are Lifecycle methods that are automatically invoked in different stages of the lifecycle. We can manipulate class components using these methods.

Now we know what are lifecycle methods and why are they useful. Let us see what are different methods.

Lifecycle Methods

A react component goes through four stages of the lifecycle as follows:

1. Initialization
2. Mounting
3. Updating
4. Unmounting

Now let us see each method in brief.

Initialization

This method is called before anything else and at the beginning of the component's journey. In this stage, we define the initial state of the component through the use of the constructor.

class Color extends React.Component{
constructor(props){
// Calling the constructor of
// Parent Class React.Component

super(props);

//Set the initial state

this.state= {favcolor:"black"};
}
}

Mounting

Mounting is a phrase of lifecycle in which initialization of the component is completed and the component is mounted on DOM and rendered on the webpage for the first time. The methods in this phrase are:

1. componentWillMount()

This method is called just before the component is mounted on DOM and rendered for the first time or called before render() function is invoked for the first time

2. componentDidMount()

This method is called just after the component is mounted on DOM and after the component output has been rendered to the DOM.

Updating

Updation is the phase where the states and props of a component are updated, followed by user events such as clicking, pressing a key on the keyboard, etc. The methods in this phrase are:

1.shouldComponentUpdate() In this method, you can return a Boolean value that specifies whether React should continue with the rendering or not that is it determines whether a component should be updated or not. By default, the value is always true.

2.componentWillUpdate() This function is invoked before the component gets rerendered. If you want to perform some calculation before re-rendering the component and after updating the state and prop, then this is the best place to do it.

3.componentDidUpdate() This function is invoked after the component gets rerendered that is this function is called after the invoked once after the render() function is executed.

Unmounting

This is the last phase of the lifecycle the component will unmount from the DOM. The method available in this phrase :

1.componentWillUnmount() This function is invoked before the component is finally unmounted from the DOM. This method denotes the end of the component’s lifecycle.

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

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

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

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

    render()
    {
        return (
            <div>
            <h1>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'));

Output:

And that's all thank you for reading.