React Lifecycle Methods

This is a super helpful diagram illustrating how the lifecycle methods fall within the lifecycle of React. Today I’ll speak of lifecycle methods I’ve come across and found useful.
In the mounting stage we have getDerivedStateFromProps which is useful before the render and is helpful for getting state from Redux. We then hit the render method and componentDidMount.
componentDidMount is useful to ensure your API response is rendered and you can setState as well. This method calls an extra render however this will happen before the browser updates the screen.
While updating again we use getDerivedStateFromProps in the same manner as before. After the render we have componentDidUpdate which can be used to make a network request comparing previous props to current props.

You can setState immediately in this method but ensure that it has a conditional as above. This also triggers a re-rendering which isn’t visible to the user however may affect performance.
Finally we have the unmounting phase where we have componentWillUnmount. This method is called right before a component is unmounted which is good to perform necessary cleanup such as invalidating timers or canceling network requests.