Execution sequence of a React component’s lifecycle methods

When working with React, it is important to understand the role that each component lifecycle method plays and the order in which they are invoked.

Why does it matter?

For starters, I will list out just a few basic reasons why you need to know about the lifecycle methods.

  • You might want to perform certain actions when a new component instance is initialized or destroyed.
  • Even though react optimizes the render for you, there may be cases when you want to inspect your component state/props to determine if you even need to invoke render in the first place.
  • You might want to write reusable Mixins that are invoked at certain points in a component’s lifecycle.
  • You might want to perform some calculations when the a parent of a component changes your component’s props.

Moreover, an implicit knowledge about the lifecycle methods will also help you make decisions when implementing and organizing your components in the flux architecture.


Scenarios

There are just a few scenarios that require you to be aware of the lifecycle methods
1. Initial Render
2. Props Change
3. State Change
4. Component Unmount

Initial Render

reactjs component lifecycle on initial render

NOTE: Although the above diagram will help you visualize the flow, the invocation of getDefaultProps actually takes place once before any instance of the component is created and the return value is shared among all instances of the component. Thanks to @boxofrox for bringing up this point in the comments.

Props Change

reactjs component lifecycle on props change

State Change

reactjs component lifecycle on state change

Component Unmount

reactjs component lifecycle on props change


Finally, below is a snippet that contains all the lifecycle methods and other frequenly used method that you can use as starting point for creating your components. 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;

Ryan Sukale

Ryan is just a regular guy next door trying to manage his life and finances.

You may also like...

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

  • Kabir Sarin

    The first method in the first picture is labeled “getInitialProps” when it should be called “getDefaultProps” – other than that, a handy little article!

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

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

  • boxofrox

    The initial render section is inaccurate. According to the React.js docs, getDefaultProps isn’t called on first render, it’s called on class creation, cached, and shared across all instances.

    This is a problem because you cannot call instance methods of your component within getDefaultProps to, for example, clear a form when recovered data is not provided.

    Invoked once and cached when the class is created. Values in the mapping will be set onthis.props if that prop is not specified by the parent component (i.e. using an in check).

    This method is invoked before any instances are created and thus cannot rely onthis.props. In addition, be aware that any complex objects returned by getDefaultProps()will be shared across instances, not copied.

  • Shreya

    Very Nice Article!!
    In just few minutes a newbie can understand the lifecycle

  • EmBer

    LOVE THIS!!!!!

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

  • boyney123

    Nice visualisation thanks!

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

  • Chetan Motamarri

    Such an awesome tutorial. Keep going.