Every React component has a story

Now that we know about the state of a component and how when that state changes some magic happens, let’s learn the last few concepts about that process.

1. A component might need to re-render when its state gets updated or when its parent decides to change the props that it passed to the component
2. If the latter happens, React invokes another lifecycle method, componentWillReceiveProps.
3. If either the state object or the passed-in props are changed, React has an important decision to do. Should the component be updated in the DOM? This is why it invokes another important lifecycle method here, shouldComponentUpdate. This method is an actual question, so if you need to customize or optimize the render process on your own, you have to answer that question by returning either true or false.
4. If there is no custom shouldComponentUpdate specified, React defaults to a very smart thing that’s actually good enough in most situations.
5. First, React invokes another lifecycle method at this point, componentWillUpdate. React will then compute the new rendered output and compare it with the last rendered output.
6. If the rendered output is exactly the same, React does nothing (no need to talk to Mr. Browser).
7. If there is a difference, React takes that difference to the browser, as we’ve seen before.
8. In any case, since an update process happened anyway (even if the output was exactly the same), React invokes the final lifecycle method, componentDidUpdate.