Show Buttons
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkdin
Share On Reddit
Share On Stumbleupon
Contact us
Hide Buttons

Execution sequence of a React component’s lifecycle methods

When work­ing with React, it is impor­tant to under­stand the role that each com­po­nent life­cy­cle method plays and the order in which they are invoked.

Why does it mat­ter?

For starters, I will list out just a few basic rea­sons why you need to know about the life­cy­cle methods.

  • You might want to per­form cer­tain actions when a new com­po­nent instance is ini­tial­ized or destroyed.
  • Even though react opti­mizes the ren­der for you, there may be cases when you want to inspect your com­po­nent state/props to deter­mine if you even need to invoke ren­der in the first place.
  • You might want to write reusable Mix­ins that are invoked at cer­tain points in a component’s lifecycle.
  • You might want to per­form some cal­cu­la­tions when the a par­ent of a com­po­nent changes your component’s props.

More­over, an implicit knowl­edge about the life­cy­cle meth­ods will also help you make deci­sions when imple­ment­ing and orga­niz­ing your com­po­nents in the flux archi­tec­ture.


Sce­nar­ios

There are just a few sce­nar­ios that require you to be aware of the life­cy­cle meth­ods
1. Ini­tial Ren­der
2. Props Change
3. State Change
4. Com­po­nent Unmount

Ini­tial Render

reactjs component lifecycle on initial render

NOTE: Although the above dia­gram will help you visu­al­ize the flow, the invo­ca­tion of get­De­fault­Props actu­ally takes place once before any instance of the com­po­nent is cre­ated and the return value is shared among all instances of the com­po­nent. Thanks to @boxofrox for bring­ing up this point in the comments.

Props Change

reactjs component lifecycle on props change

State Change

reactjs component lifecycle on state change

Com­po­nent Unmount

reactjs component lifecycle on props change


Finally, below is a snip­pet that con­tains all the life­cy­cle meth­ods and other fre­quenly used method that you can use as start­ing point for cre­at­ing your com­po­nents. You can also find this code this gist.

/**
 * @jsx React.DOM
 */

var React = require('react'),
    MyReactComponent = React.createClass({

    // The object returned by this method sets the initial value of this.state
    getInitialState: function(){
        return {};
    },

    // The object returned by this method sets the initial value of this.props
    // If a complex object is returned, it is shared among all component instances      
    getDefaultProps: function(){
        return {};
    },

    // Returns the jsx markup for a component
    // Inspects this.state and this.props create the markup
    // Should never update this.state or this.props
    render: function(){
        return (<div></div>);
    },

    // An array of objects each of which can augment the lifecycle methods
    mixins: [],

    // Functions that can be invoked on the component without creating instances
    statics: {
        aStaticFunction: function(){}
    },

    // -- Lifecycle Methods --

    // Invoked once before first render
    componentWillMount: function(){
        // Calling setState here does not cause a re-render
    },

    // Invoked once after the first render
    componentDidMount: function(){
        // You now have access to this.getDOMNode()
    },

    // Invoked whenever there is a prop change
    // Called BEFORE render
    componentWillReceiveProps: function(nextProps){
        // Not called for the initial render
        // Previous props can be accessed by this.props
        // Calling setState here does not trigger an an additional re-render
    },

    // Determines if the render method should run in the subsequent step
    // Called BEFORE a render
    // Not called for the initial render
    shouldComponentUpdate: function(nextProps, nextState){
        // If you want the render method to execute in the next step
        // return true, else return false
        return true;
    },

    // Called IMMEDIATELY BEFORE a render
    componentWillUpdate: function(nextProps, nextState){
        // You cannot use this.setState() in this method
    },

    // Called IMMEDIATELY AFTER a render
    componentDidUpdate: function(prevProps, prevState){
    },

    // Called IMMEDIATELY before a component is unmounted
    componentWillUnmount: function(){
    }

});

module.exports = MyReactComponent;

You may also like...

  • Pingback: React Lifecycle : Updating | Duncan 's Blog()

  • Kabir Sarin

    The first method in the first pic­ture is labeled “getIni­tial­Props” when it should be called “get­De­fault­Props” — other than that, a handy lit­tle article!

  • Pingback: Using the ZingChart Component for React - Dataviz Blog()

  • Pingback: React.js相关知识 | Jay Mark()

  • box­ofrox

    The ini­tial ren­der sec­tion is inac­cu­rate. Accord­ing to the React.js docs, get­De­fault­Props isn’t called on first ren­der, it’s called on class cre­ation, cached, and shared across all instances.

    This is a prob­lem because you can­not call instance meth­ods of your com­po­nent within get­De­fault­Props to, for exam­ple, clear a form when recov­ered data is not provided.

    Invoked once and cached when the class is cre­ated. Val­ues in the map­ping will be set onthis.props if that prop is not spec­i­fied by the par­ent com­po­nent (i.e. using an in check).

    This method is invoked before any instances are cre­ated and thus can­not rely onthis.props. In addi­tion, be aware that any com­plex objects returned by getDefaultProps()will be shared across instances, not copied.

  • Shreya

    Very Nice Arti­cle!!
    In just few min­utes a new­bie can under­stand the lifecycle

  • EmBer

    LOVE THIS!!!!!

  • Pingback: React Native 专题系列教程第1部分——关于React Native – 那时那你()

  • boyney123

    Nice visu­al­i­sa­tion thanks!

  • Pingback: Using the ZingChart Component for React - ZingChart Blog()

  • Chetan Mota­marri

    Such an awe­some tuto­r­ial. Keep going.