Be the first user to complete this post

  • 0
Add to List

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;



Also Read:

  1. Passing the store down implicitly via context in a react redux app
  2. Pure vs Impure functions
  3. Generating container components with connect utility in react redux app
  4. Automating Store and Action registration for multiple components using Fluxxor
  5. Using React with Backbone Models