Why hooks
Hooks let you use state and other React features without writing classes. They also encourage extracting logic into reusable functions that any component can share.
The mental model is simple: every hook call is tied to the component instance, so the same hook can be used many times across your tree.
State with useState
useState returns a value and a setter. Keep state minimal and derived values computed on the fly, and your components stay predictable.
When updates depend on the previous value, pass a function to the setter. That avoids stale closures and race conditions in fast-changing UIs.
Effects, and when to reach for them
useEffect runs after render and keeps your component in sync with the outside world — subscriptions, timers, or API calls. But not everything needs an effect; many derived values can be computed during render.
Keep effects focused. One effect per concern, with explicit dependencies, makes bugs much easier to track down.
Custom hooks
The real superpower is composition. Extract repeated logic into custom hooks so components describe what they render instead of how they work.
Name hooks with use, keep them focused on a single concern, and your codebase will thank you later.