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.


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


        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

To Know more information about  ReactJS Development Services

Posted On 23 February 2017 By MicroPyramid

Need any Help in your Project?Let's Talk

Latest Comments
Related Articles
Understanding ReactJs Component, State and Props

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...
React-router for navigation

React router is a React package which helps in navigation.
React router is divided to three packages: react-router, react-router-dom and react-router-native.
As we are building ...

Continue Reading...
open source packages

Subscribe To our news letter

Subscribe and Stay Updated about our Webinars, news and articles on Django, Python, Machine Learning, Amazon Web Services, DevOps, Salesforce, ReactJS, AngularJS, React Native.
* We don't provide your email contact details to any third parties