React Component's Life Cycle

Sidharth Anand — Fri, 02 Sep 2022 01:17:23 +0000

As we all are familiar that components are the basic building blocks of a react app, therefore it becomes crucial to understand their life cycle over the course of a react app.

Phases of React Life Cycle

The life cycle of components is divided into four phases that are invoked in different stages of a component. These phases are listed below:-

Initialization
Mounting
Updation
Unmounting

Let us dive deeper into each of these phases starting with Initialization.

Initialization

This the phase where the components are born. This stage requires the developer to define props and initial state of the component which is done in the constructor.

constructor(props) {
        // Calling parent class constructor
        super(props);

        // Setting initial state
        this.state = {
            clickCount: 0
        };
    }

Mounting

During this phase, instance of a component is created and inserted into the DOM. It consists of the following methods:-

componentDidMount(): This method is invoked immediately after the component is rendered into the DOM. This method is called just after the render function is executed for the first time.
render(): This method is defined in each and every component. It is responsible for returning a single root HTML node element. If you don't want to render anything, you can return a null or false value.

Updation

This is the phase where state and properties of the components are changed if required by some user events. The main aim of this phase is to ensure that the component is displaying the latest version of itself. Following are the methods used in this phase:-

shouldComponentUpdate(): It is invoked when a component decides any changes/updation to the DOM. It allows you to control the component's behavior of updating itself. If this method returns true, the component will update. Otherwise, the component will skip the updating.
componentDidUpdate(): This method is called after a component is re-rendered that is this method is called once after the render function is executed post updation. This method is not invoked for initial rendering.

Unmounting

It is the final phase of the react component lifecycle. It is called when a component instance is destroyed and unmounted from the DOM. This phase contains only one method and is given below.

componentWillUnmount(): This method is called when a component is fully removed from the page and this shows the end of its lifecycle.

Example

Following is a code example to understand react component's life cycle:

export default class App extends Component {
    constructor(props) {
        // Calling parent class constructor
        super(props);

        // Settings initial state
        this.state = {
            clickCount: 0
        };

        console.log('Constructor called'); 
    }

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

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

    shouldComponentUpdate(){
        console.log("shouldComponentUpdate called"); 
        return false; 
    }

    handleClick = () => {
        let {clickCount} = this.state; 

        this.setState({clickCount: clickCount + 1}); 
    }

    render() {
        console.log("render called"); 

        return (
            <>
                <Header brandName="Xorg"/> 
                <Button handleClick={this.handleClick} displayCount={this.state.clickCount}/> 
            </>
        );
    }
}

This is the order in which the functions are called initially.

This is the order in which the functions are called after a state update of a component.