Relearning React: From Classes to Hooks

If you’ve been using React for a while, you’ve seen it evolve from classes to functions, but the documentation hasn’t caught up. It describes Hooks, but still describes component lifecycle in class terms, and it causes a lot of confusion. A year after their introduction, people keep asking how to mimic componentDidUpdate in Hooks, when managing side effects with Hooks is completely different and significantly easier.

Classes Versus Functions: Fields Versus Closures

This is the first article in a 3-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 articles are:

• 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…