Proficiency with the Hooks API
What You'll Learn
- How to properly think about each of the hooks
- When to reach for more specific hooks (useRef, useMemo, useCallback, useLayoutEffect)
- What exactly is memoization and what is it solving
- Examples of custom hooks
Hooks at a High-Level
The new React docs are great material for understanding hooks and how to use them in your code. The flow diagram below can also help build your mental model around when certain hook actions are "running" during the component lifecycle.
Hooks Mental Model (Decision Map)
State
useState for local state
useReducer for complex transitions
Side Effects
useEffect for async/effects
useLayoutEffect only when layout measurement timing matters
References
useRef for mutable values without re-render
useImperativeHandle for controlled ref APIs
Performance
useMemo for expensive derived values
useCallback for stable callback identities
Rule of thumb: start simple -> profile -> optimize only measured bottlenecks.
Hooks Deep Dive
Custom Hook Examples
You can also copy+paste hooks from the websites below into your own projects. If you prefer to keep npm dependencies as light as possible, you could copy over only the ones you need.