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.
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...