React Component Lifecycle methods

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

The article was originally published at MicroPyramid blog