componentWillReceiveProps

This is very commonly used and misused react hook. I would tike to separate this section into two parts — side-effects and state.

Side-effects

Consider this example: I have an intercom integration, but it needs to be shown on particular routes.

Before

After

componentDidUpdate is invoked only after update occurs and not on the initial render.

You can do all kinds of side-effects with it, from data fetching to DOM manipulation. You may call this.setState() but note that it must be wrapped in a condition like in the example above, or you will cause an infinite loop.

Component level state

Consider this example: I have component for list rendering, and that list can be reordered using drag and drop. For performance reasons I decide to keep copy of the list internally, and only update redux state on dragEnd. That requires me to keep both states in sync.

Before

After

getDerivedStateFromProps is invoked right before calling the render method, both on the initial mount and on subsequent updates. It should return an object to update the state, or null to update nothing.