Member-only story
Relearning React
From classes to Hooks
If you’ve been developing React applications for a while, you’ve seen React’s evolution from classes to functions. But even a year after the release of Hooks, the documentation is still largely class-centric. It’s common to hear developers ask, “How do I do componentDidUpdate with Hooks?” because they’re used to the class-based paradigm of component lifecycle.
Now that Hooks have matured, it’s time for us to move from a class-based paradigm to a functional one.
While React’s documentation highlights some of the differences, it mentions them in passing, surrounded by examples. This article dives deep into the philosophical differences and how they change how we think about components.*
Lifecycle Versus Tasks
Functional components break up their work differently than class components.
Class components focus on the lifecycle
A class-based component has member methods for every step of the lifecycle of a component:
- Initialization:
constructor - Rendering:
render - Side-effect generation:
componentDidMount/componentDidUpdate - Cleanup:
componentWillUnmount
