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

How state works without classes

Welcome back. In Part One I gave an overview on how functional components using Hooks have a completely different approach on lifecycle management versus class-based components. In Part Two, I’ll go into how Hooks manage state, and how it can surprise you if you’re used to managing state in classes.

This is Part Two in a four-part series, devoted to users of React class-based components who find functional components with Hooks confusing. The other parts are as follows:

• This Ain’t Your Grandma’s React: How Hooks Rewrote Your Understanding of Components
• 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

So, we’ll start by reintroducing the diagram I made following in Dan Abramov’s class component lifecycle diagram’s footsteps:

In this article we’ll be focusing on the Hooks on the left side of the main Component() function.

State in Functional Components