Life cycle methods for Mounting Component to DOM :

Lifecycle methods which are called when component initialised.

1. Constructor or (get Initial State):

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 should Component Update(only if it returns true).

4. render:

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

5. component Did Update:

component Did Update 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