This Ain’t Your Grandma’s React (Part 3)

How Hooks handle dependencies

This is the third of four articles devoted to banishing the idea that you can look at functional components using Hooks as if they were like class-based components. The other articles are:

• This Ain’t Your Grandmas’s React: How Hooks Rewrote Your Understanding of Components
• This Ain’t Your Grandma’s React II: How State Works Without Classes
• This Ain’t Your Grandma’s React IV: How Hooks Make Side Effects Make Sense

If you haven’t already read the previous two, you may want to take some time and do so.

This article looks at how functional components let you consistently use variables after rendering is complete. It also discusses how to freeze and update information, and gives you the groundwork for side effects in Part Four.

Let’s take one more look at the diagram I created showing how Hooks plug into the single function that comprises a functional component:

Extremely loosely patterned after Dan Abramov’s original class lifecycle diagram on Twitter

In Part One, we talked about how the overall Hooks architecture differs from classes. In Part Two, we talked about how state is…