Cheatsheet
React Hooks Cheatsheet
Every React hook with a real-world example and the trap that catches most developers. Use it, then flashcard the ones you keep forgetting.
React hooks arrived in 16.8 (2019). The core five (useState, useEffect, useContext, useMemo, useCallback) are used every day; the newer ones (useTransition, useDeferredValue, useOptimistic, use) are used weekly or less. Most React developers forget the syntax for the ones they use less. This page is the lookup.
For each hook: purpose in one line, minimal working example, common mistake. If you keep forgetting one, drop the section into Ellie and generate a flashcard deck.
useState
`const [n, setN] = useState(0)`. Purpose: local component state.
Trap: setter is async. `setN(n+1); setN(n+1)` still increments once. Use functional form: `setN(x => x+1)`.
Lazy init for expensive computation: `useState(() => expensive())`.
useEffect
`useEffect(() => { ...; return cleanup; }, [deps])`. Purpose: side effects (subscriptions, DOM, fetches).
Trap: stale closures. If you use a variable inside the effect, it must be in deps — or use the ref pattern.
Cleanup runs before the next effect and on unmount. Always cancel subscriptions and abort fetches.
useMemo
`const value = useMemo(() => compute(a, b), [a, b])`. Purpose: memoize expensive computation across renders.
Trap: overuse. If `compute` is cheap, useMemo makes the code slower and harder to read.
useCallback
`const fn = useCallback((x) => ..., [deps])`. Purpose: stable function reference for memoized children.
Trap: useless if the child does not use React.memo. Callback stability alone does nothing.
useRef
`const ref = useRef(null)` then `<div ref={ref}>`. Purpose: DOM refs and mutable values that do not trigger re-render.
Trap: reading ref.current during render is not safe — the ref updates after commit.
useContext
`const value = useContext(MyContext)`. Purpose: read context set by a Provider higher in the tree.
Trap: every context consumer re-renders when the context value changes. Split contexts by update frequency for performance.
useReducer
`const [state, dispatch] = useReducer(reducer, initial)`. Purpose: complex state transitions (state machines).
Trap: overkill for a single boolean; underkill without a plan for complex flows.
useTransition and useDeferredValue
`const [isPending, startTransition] = useTransition()`. Purpose: mark an update as non-urgent so React keeps the UI responsive.
`useDeferredValue(value)` returns a deferred copy of a value that lags behind during interactions.
use() (React 19+)
`const data = use(promise)`. Purpose: unwrap a promise or context inside a component. Suspends the component until the promise resolves.
Trap: can only be called inside components or hooks; not in conditionals except in specific cases.
useOptimistic (React 19+)
`const [optimistic, addOptimistic] = useOptimistic(state, updater)`. Purpose: show optimistic UI while a server action is pending.
Trap: the optimistic value resets when the underlying state updates; do not treat it as persistent.
Frequently asked questions
Do I really need useMemo and useCallback everywhere?
No. Both cost memory and add complexity. Use them when you have a measurable render performance problem or when a memoized child needs a stable reference. Otherwise skip them.
How do I fix stale closures in useEffect?
Two options: add the dependency to the deps array (correct if the effect should re-run), or use a ref to hold the current value and read `ref.current` inside the effect (correct if the effect should keep the same closure).
When should I use useReducer over useState?
When state transitions are complex, when multiple values update together, or when you want to test transitions without the component. Simple toggles stay on useState.
Are class components dead?
Effectively yes for new code. Every class-component pattern has a hook equivalent. Existing class components still work; you rarely write new ones.
What is the Rules of Hooks?
Two rules: only call hooks at the top level (not inside loops, conditions, or nested functions), and only call hooks from React functions (components or other hooks). Enforced by the react-hooks ESLint plugin.
Keep exploring
Made for exam season
Pass that exam.
Turn your notes into flashcards and quizzes in seconds. Study smarter — start free today.