Understanding component lifecycle's updating methods

A React component has five lifecycle methods that belong to a component's updating phase:

• componentWillReceiveProps()

• shouldComponentUpdate()

• componentWillUpdate()

• render()

• componentDidUpdate()

See the following figure for a better view:

We're already familiar with the render() method. Now let's discuss the other four methods.

The componentWillReceiveProps method

We'll start with the componentWillReceiveProps() method in the StreamTweet component. Add the following code after the componentDidMount() method in the StreamTweet.react.js file:

componentWillReceiveProps: function (nextProps) {
  console.log('[Snapterest] StreamTweet: 4. Running componentWillReceiveProps()');

  var currentTweetLength = this.props.tweet.text.length;
  var nextTweetLength = nextProps.tweet.text.length;
  var isNumberOfCharactersIncreasing = (nextTweetLength > currentTweetLength);
  var headerText;

  this.setState({
    numberOfCharactersIsIncreasing: isNumberOfCharactersIncreasing...