Understanding component lifecycle 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:

You'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.js file:

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

  const { tweet: currentTweet } = this.props;
  const { tweet: nextTweet } = nextProps;

  const currentTweetLength = currentTweet.text.length;
  const nextTweetLength = nextTweet.text.length;
  const isNumberOfCharactersIncreasing = (nextTweetLength > currentTweetLength);
  let headerText...