Cheat sheet
React Hooks cheat sheet
useState, useEffect, useMemo, useRef, and custom hooks — when to reach for each.
Updated 2026-06-01
State & refs
- useState
- Local UI state. Prefer functional updates when next value depends on previous.
- useRef
- Mutable box that does not re-render — DOM nodes, timers, previous values.
- useReducer
- Complex state transitions with explicit actions — good for multi-step forms.
Effects & memo
- useEffect
- Sync with external systems. Cleanup subscriptions. Avoid deriving state in effects.
- useMemo
- Cache expensive pure calculations. Do not use by default — measure first.
- useCallback
- Stable function identity for child memoization / effect deps. Same caveat as useMemo.
Custom hooks
- Naming
- Start with use. Return tuples or objects consistently.
- Rules
- Only call hooks at top level. Share logic, not JSX trees, via hooks.
Never miss a drop
Get new guides on web development and AI, Prompt Lab tips, videos, downloads and exclusive deals — straight to your inbox. No spam, unsubscribe anytime.