React Hooks took the JavaScript world by storm when they were announced in 2018. As a new addition to React, Hooks fundamentally changed the way we write React components by letting us use state and other React features without having to write a class.
But why are Hooks so revolutionary? And how do we actually use them? Let’s break it down.
The Problems With Classes
Before Hooks, the only way to use state and lifecycle methods in React was with class components. This posed a few problems:
- Classes confuse people — the this keyword and binding event handlers can trip up JavaScript developers used to writing functions.
- There’s no way to reuse stateful logic between components — you end up duplicating code or rendering unnecessary components just to share some state or behavior.
- Complex components become hard to understand — when the related logic is split apart in lifecycle methods, classes don’t lend themselves to clear code.
Enter Hooks.
What Are Hooks?
Hooks are functions that let you “hook into” React features like state, lifecycle methods, and context from your function…
