React Component Lifecycle methods

Reading Time : ~ .

These are special methods provided by react Js. These methods are excuted when specific condition( ex: component mounted to UI, State updated) triggered in component.

Lifecycle methods for Mounting Component to DOM:

Lifecycle methods which are called when component initialised.

1. Constructor(or getInitialState):
    Constructor is used to set initial state for component. for example in Counter component initial state of count is 0.

    constructor(props) {

        this.state = { 

            count: 0

        };

    }

2. componentWillMount:
    This method will be called before component render to screen.

3. render:
    In this method you will see component on Screen. this method should be pure. do not update state in this method.

4. componentDidMount:
    This method will be called right after the render method. updating state in this method will re-render component.

Lifecycle methods for Updating Component state/props:

1. componentWillReceiveProps:
    this method is called whenever component recieves new props.
    Note: this method is called several time. it is better to compare new props with old one.

    componentWillReceiveProps(nextProps){

        if (JSON.stringify(this.props.month) !== JSON.stringify(nextProps.month)){

            // component recived new props.

        }

    }
2. shouldComponentUpdate:
    In this method you can check whether re-rendering the component is neccessary or not. return false if you don't want to re-render component.
    shouldComponentUpdate(nextProps, nextState){

        // return a boolean value

        return true;

    }

3. componentWillUpdate
    this method will be called after shouldComponentUpdate(only if it returns true).

4. render:
    In this method updated component will be rendered to screen. with new data(or changes).

5. componentDidUpdate:
    componentDidUpdate will be called after render method.

lifecycle methods demo.

import React, { Component } from 'react';

class Lifecycle extends Component {

    constructor(props) {

        console.log('constructor called')

        super(props);

        this.state = { 

            count: 0

        };

        this.Add = this.Add.bind(this);

        this.Remove = this.Remove.bind(this);

    }



    componentWillMount(){

        console.log('componentWillMount called')

    }

    componentDidMount() {

        console.log('componentDidMount called')

    }

    Add(){

        this.setState({count: this.state.count + 1})

    }

    Remove(){

        this.setState({count: this.state.count - 1})

    }

    componentWillReceiveProps(){

        console.log('componentWillReceiveProps called')

    }

    shouldComponentUpdate(){

        console.log('shouldComponentUpdate called');

        return true

    }

    componentWillUpdate(){

        console.log('componentWillUpdate called')

    }

    componentDidUpdate(){

        console.log('componentDidUpdate called');

    }

    render() {

        console.log('render called');

        return (

            <div>

                <div>

                    <h1>{this.state.count}</h1>

                </div>

                <button onClick={this.Add}>

                    <span>+(Add)</span>

                </button>

                <button onClick={this.Remove}>

                    <span>-(Remove)</span>

                </button>

            </div>

        );

    }

}

OutPut

First Time Component Rendered:

// Console Output:

constructor called

componentWillMount called

render called

componentDidMount called

Updating state(After clicking Add/remove button):

// console Output:

shouldComponentUpdate called

componentWillUpdate called

render called

componentDidUpdate called
    By Posted On
SENIOR DEVELOPER at MICROPYRAMID

Need any Help in your Project?Let's Talk

Latest Comments
Related Articles
Understanding ReactJs Component, State and Props Ravi Kumar Gadila

ReactJs is populer JS script library for building User Interface. It's components are reusable and efficiently manages the data that changes over time. In this ...

Continue Reading...

Subscribe To our news letter

Subscribe to our news letter to receive latest blog posts into your inbox. Please fill your email address in the below form.
*We don't provide your email contact details to any third parties