Innovate anywhere, anytime Your cloud-based dev studio.

React Component Life Cycle Methods


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.


        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')


        this.state = { 

            count: 0


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

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



        console.log('componentWillMount called')


    componentDidMount() {

        console.log('componentDidMount called')



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



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



        console.log('componentWillReceiveProps called')



        console.log('shouldComponentUpdate called');

        return true



        console.log('componentWillUpdate called')



        console.log('componentDidUpdate called');


    render() {

        console.log('render called');

        return (





                <button onClick={this.Add}>



                <button onClick={this.Remove}>








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