React Hooks Quick Reference
Every core hook, what it is for, and the rules and gotchas that cause most React bugs.
State & effects
- useState
const [n, setN] = useState(0)· functional update:setN(x => x+1)- useEffect
- Side effects after render. Return a cleanup fn. Deps array controls when it re-runs.
- Empty deps []
- Run once on mount (cleanup on unmount).
- Effect gotcha
- Missing a dependency → stale values. Include everything you read, or use a ref.
- useLayoutEffect
- Like useEffect but fires synchronously before paint — for DOM measurements.
Memoization
- useMemo
- Cache an expensive computed value:
useMemo(() => compute(a), [a]) - useCallback
- Cache a function identity:
useCallback(fn, [deps])— stops child re-renders - When to use
- Only when a value/fn is passed to memoized children or is genuinely expensive. Don’t over-memoize.
Refs & context
- useRef
- Mutable box that persists across renders without causing re-renders:
ref.current - DOM ref
<input ref={inputRef} />theninputRef.current.focus()- useContext
const theme = useContext(ThemeContext)— read provided value- useReducer
const [state, dispatch] = useReducer(reducer, init)— complex state
Rules of hooks
- Top level only
- Never call hooks in loops, conditions, or nested functions — order must be stable.
- Components/hooks only
- Call from React function components or custom hooks (
useX). - Custom hooks
- Extract reusable logic into a
useSomething()that calls other hooks.