Our proud SaaS cloud development environment runcode.io

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.


        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

Posted On 23 February 2017 By MicroPyramid

About Micropyramid

Micropyramid is a software development and cloud consulting partner for enterprise businesses across the world. We work on python, Django, Salesforce, Angular, Reactjs, React Native, MySQL, PostgreSQL, Docker, Linux, Ansible, git, amazon web services. We are Amazon and salesforce consulting partner with 5 years of cloud architect experience. We develop e-commerce, retail, banking, machine learning, CMS, CRM web and mobile applications.

Need any Help in your Project?Let's Talk


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