Anyone who’s spent some time with React has seen its evolution from classes to functions, yet the documentation hasn’t caught up. It still describes component lifecycle in class terms, and it’s caused a lot of confusion. A year after their introduction, people keep asking how to mimic componentDidUpdate in Hooks, without recognizing that you can’t. Hooks don’t play like that.

But you can manage side effects. That’s what we’re really asking. The key is to step back far enough to see how Hooks let us get similar results from functional components as class-based components, but in very different ways.

This is the first article in a 4-part series that looks at how to let go of class component lifecycles when thinking about functional components. It takes a look at the fundamental differences between the two and some of the key elements that need to be understood to dive into using Hooks. The other three articles are forthcoming over the next Mondays:

• This Ain’t Your Grandma’s React II: How State Works Without Classes
• This Ain’t Your Grandma’s React III: How Hooks Handle Dependencies
• This Ain’t Your Grandma’s React IV: How Hooks Make Side Effects Make Sense

These articles aren’t really meant to explain how to write components. I’m writing these for people who have spent some time getting used to class-based components, decided to get into functional components and Hooks, and got frustrated by the differences that crop up. If this sounds like you, I hope this helps.

A Quick Refresher on the Class Component Lifecycle

This may be old hat to class-based developers. You may want to skip this section. I grew up in Hooks, so I had to familiarize myself with this before I could understand the differences. New developers may want to study both avenues to compare and contrast.

Back in 2018, Dan Abramov made a famous diagram showing how the different class component lifecycle methods come together:

From Twitter. An updated version exists in the tweet’s thread, but this provides some basic context.

Some things to note in the class-based lifecycle:

Lifecycle methods manage distinct phases. While some functions are used in multiple points in the lifecycle, the phase they belong to is clear. The constructor is used to initially populate props and state. getDerivedStateFromProps, shouldComponentUpdate, and render occur before the component hits the DOM. componentDidMount and componentDidUpdate happen after the component is rendered to the DOM. componentWillUnmount will happen when the component is about to be destroyed.

The key is that each part of the lifecycle has a specific method or set of methods associated to it. We’ll see how that differs with Hooks in a moment.

State and properties are members of the component. As an instance of a class, components are expected to maintain their state and properties as properties of the class instance. We access them via this.props and this.state, and update them via this.setState().

Side effects are created with access to the current component props and state. When componentDidMount or componentDidUpdate run, we can spawn different functions to, say, poll the server for status updates or keep track of element and scrolling dimensions. These outside-of-React functions are known as side effects, and are crucial to providing the responsiveness users expect from a web application.

With class-based components, these side effects have access to whatever is available when the above two functions are called, including the instance’s state, properties, and anything else associated with the instance. Side effects can access the instance’s state at any time, getting updates in realtime. This can be a blessing or curse, depending on whether or not you expect component state or non-state instance fields to change under you.

State is updated externally through member functions. When we want another component to update state (not props), we create member functions to provide access to functionality and state updaters. Other components call these members to trigger changes in our component.

Alright, ready to look at the Hooks lifecycle? Good. Here we go.

#hooks #reactjs #react-hook #react #programming