React Component Lifecycle methods

In this blog Post you can get clear information about React Component Lifecycle methods. If require any support regarding react js services then contact us at hello@micropyramid.com

These are special methods provided by react Js. These methods are executed when specific condition( ex: component mounted to UI, State updated) triggered in the 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