Explain Lifecycle Methods of React Components

Lifecycle Methods of React Components are defined as a series of methods that are invoked in different stages of the component's existence. React web apps are actually a collection of independent components which run according to the interactions made with them. Every React Component has a lifecycle of its own.

Prerequisites for Lifecycle Methods of React Components:

Before diving into React's lifecycle methods, ensure you have:

• Basic knowledge of React and JavaScript
• Familiarity with class components in React JS

Lifecycle of React Components go through four stages

1. Initialization:

This is the stage where the component is constructed with the given Props and default state. This is done in the constructor of a Component Class.

2. Mounting:

Mounting is the stage of rendering the JSX returned by the render method itself.

3. Updating:

Updating is the stage when the state of a component is updated and the application is repainted.

4. Unmounting:

As the name suggests Unmounting is the final step of the component lifecycle where the component is removed from the page.

Functions of each Phase of the Lifecycle

1. Initialization Phase of React Component:

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

class 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() };
    }
};

2. Mounting Phase of React Component:

Mounting is the phase of the component lifecycle when the initialization of the component is completed and the component is mounted on the DOM and rendered for the first time on the webpage. The mounting phase consists of two predefined functions as described below.

componentWillMount():

As the name clearly suggests, this function is invoked right before the component is mounted on the DOM i.e. this function gets invoked once before the render() function is executed for the first time.

componentDidMount():

Similarly as the previous one this function is invoked right after the component is mounted on the DOM i.e. this function gets invoked once after the render() function is executed for the first time.

3. Updation Phase of React Component:

Updation is the phase where the states and props of a component are updated followed by some user events such as clicking, pressing a key on the keyboard, etc. The following functions are invoked at different points of the Updation phase.

componentWillRecieveProps():

This is a Props exclusive Function and is independent of States. This function is invoked before a mounted component gets its props reassigned. The function is passed the new set of Props which may or may not be identical to the original Props.

setState() Function:

This is not particularly a Lifecycle function and can be invoked explicitly at any instant. This function is used to update the State of a component.

shouldComponentUpdate():

This method makes the component re-render only when there is a change in the state or props of a component and that change will affect the output. 

componentWillUpdate():

This function is invoked before the component is re-rendered i.e. this function gets invoked once before the render() function is executed after the updation of State or Props.

componentDidUpdate():

Similarly this function is invoked after the component is re-rendered i.e. this function gets invoked once after the render() function is executed after the updation of State or Props.

4. Unmounting Phase of React Component:

This is the final phase of the lifecycle of the component which is the phase of unmounting the component from the DOM. The following function is the sole member of this phase.

componentWillUnmount() Function:

This function is invoked before the component is finally unmounted from the DOM i.e. this function gets invoked once before the component is removed from the page and this denotes the end of the lifecycle.

Lifecycle Methods of React Component Example:

This example demonstrate the lifecycle methods of react components.

// Filename - index.js 

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>GeeksForGeeks.org, 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:

Conclusion

Lifecycle Methods of React Components are like checkpoints at different stages of a component's life. Understanding these methods helps managing state, performing side effects, optimizing renders, and handling errors effectively.

As React continues to evolve, how we use these methods might change with new features, but the main ideas of managing a component's life stay important.