React Hooks In Depth

The hooks beyond useState and useEffect. Nine lessons that close the gap between building a counter and building a feature.

~ 132 min·9 lessons·updated apr 2026

What you'll learn

When to reach for useReducer instead of useState
How context passes data without prop drilling, and where it stops being state management
The two jobs useRef quietly does, and how to tell which one you need
What useMemo and useCallback actually buy you, and when they're noise
How useId and useSyncExternalStore plug into things outside React
How to extract a custom hook without inventing one too early
How to compose small hooks like useToggle and useLocalStorage
How ref works as a regular prop in React 19, and what forwardRef was for

Lessons

Read in order. Each lesson stands on its own, but the order is deliberate.

9 lessons · ~132 min total

01
useReducer
When state transitions deserve names. Reducers as discriminated-union switches.
16 min
02
useContext
Passing data without prop drilling, and the line where context stops being state management.
15 min
03
useRef for DOM access
Refs as the escape hatch to imperative DOM APIs — focus, scroll, measurement.
14 min
04
useRef for mutable values
Refs that aren't refs. Storing values that change between renders without re-rendering.
13 min
05
useMemo and useCallback
What they cache, when they help, and when they're costing you more than they save.
15 min
06
useId and useSyncExternalStore
Stable IDs that survive SSR, and the official way to subscribe to a store outside React.
13 min
07
Custom hooks
Extracting stateful logic into a function whose name starts with use.
16 min
08
The hook composition pattern
Building useToggle, useLocalStorage, useDebouncedValue. Knowing when to extract.
17 min
09
Forwarding refs in React 19
Ref is a regular prop now. What changed, and how to read code that still uses forwardRef.
13 min