The React Component Lifecycle Methods: And How They Translate Into React Hooks

Izabellewilding
Jul 7, 2020 · 4 min read

I’m on a bit of a React journey at the moment, so I’ve decided to write some blog posts about its key concepts. First on my list is the component lifecycle, which I’ve recently had to get my teeth stuck into!

This article provides an explanation of some of the most useful Lifecycle methods, before showing how to translate these methods into React Hooks.

Image for post
Image for post

What is the React component Lifecycle?

The lifecycle methods come in four main categories:

  1. Mounting

2. Updating

3. Error Boundaries

4. Unmounting

You could say that mounting constitutes the components birth, unmounting its death, and everything in between as its growth. First, the component is created and mounted to the DOM. Once in place it can undergo updates triggered by changes to state and props, before unmounting itself from the DOM.

The Constructor( )

The most important thing to know about the constructor (in the context of React lifecycle) is that it is NOT the place to introduce any *side effects. The same goes for Render() which is a pure function, meaning that you can't alter state or perform any asynchronous functions within it. This is where the other lifecycle methods come in handy.

*Side Effects: Anything that happens outside of the return value. API calls, logging to the console and calling setTimeout() are examples of side effects, as they live beyond the execution of the return value.

ComponentWillMount( ) (Deprecated)

It might have been tempting to initiate an AJAX requests here, to give the API call a head start while the UI loads. It's generally a bad idea to do this, since it can result in errors.

Best practice is to render the HTML before sending a data request, as it allows the skeleton UI to load and provide a loading indicator to show the user that the page is on its way. Similarly, if you have an app with data that changes every few seconds, you don’t want a change in the data to cause a re-render every time it updates.

ComponentDidMount( )

Data Fetching with React Hooks

The useEffect() hook can be used in an equivalent way to componentDidMount(), componentDidUpdate() and componentWillUnmount(). In other words, it handles side effect functions. Here's the example above refactored to React Hooks:

We just want useEffect() to run and clean up once, so a dependency array can be passed in as the second argument. This array can either be empty, or it can contain parameters (state and props) that control when the useEffect() is run.

If the array is left empty, then it'll only run once on mounting. If you include dependency parameters, the useEffect() hook will run each time one of these parameters is changed or updated. Without the dependency conditions, it can be triggered by any change to the component's data, which can be quite often if you have a complex app with lots of props.

ComponentDidUpdate( )

Don’t forget to unmount!

Here’s an example of a function that gets called every time the user scrolls. The useEffect() still only mounts and unmounts once, so our cleanup function removeEventListener cancels the event subscription when the component unmounts.

Error Boundaries

Once defined, they can be used as a regular component:

For a more in depth guide to all the lifecycle methods check out the React official docs.

Originally published at http://github.com.

The Startup

Medium's largest active publication, followed by +752K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store