React Lifecycle Methods

Paul Elis
Paul Elis
Sep 2, 2018 · 2 min read

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade