react-lifecycle-updating.jsx

import React from "react";
import { render } from "react-dom";

const ParentComponent = React.createClass({
  getInitialState: function() {
    return { text: "" };
  },
  onInputChange: function(e) { 
    this.setState({ text: e.target.value });
  },
  render: function() { 
    return (
      <div className="container">
        <input
          value={this.state.text}
          onChange={this.onInputChange} />
        <ChildComponent text={this.state.text} />
      </div>
    );
  }
});

const ChildComponent = React.createClass({
  componentWillReceiveProps: function(nextProps) {
    console.log("Step 1 (invoked multiple times) => ComponentWillReceiveProps");
    console.log(nextProps);
  },
  shouldComponentUpdate: function(nextProps, nextState) {
    console.log("Step 2 (invoked multiple times) => ShouldComponentUpdate");
    return true;
  },
  componentWillUpdate: function(nextProps, nextState) {
    console.log("Step 3 (invoked multiple times) => ComponentWillUpdate");
    console.log("nextProps:");
    console.log(nextProps);
    console.log("nextState:");
    console.log(nextState);
  },
  render: function() { 
    console.log("Step 4 (invoked multiple times) => Render");
    return (
      <div>Props: {this.props.text}</div>
    );
  },
  componentDidUpdate: function(previousProps, previousState) {
    console.log("Step 5 (invoked multiple times) => ComponentDidUpdate");
    console.log("previousProps:");
    console.log(previousProps);
    console.log("previousState:");
    console.log(previousState);
  }
});

render(
  <ParentComponent />,
  document.getElementById("root")
);