React Hooks Cheat Sheet
All React built-in hooks with signatures, patterns, and gotchas — from the basics to React 18+ additions.
State Hooks
useState
const [state, setState] = useState(initialValue);
// Functional update (safe with async/batching)
setState(prev => prev + 1);
// Object state — always spread to preserve other fields
setState(prev => ({ ...prev, name: "new" }));
useReducer
function reducer(state, action) {
switch (action.type) {
case 'inc': return { count: state.count + 1 };
default: return state;
}
}
const [state, dispatch] = useReducer(reducer, { count: 0 });
dispatch({ type: 'inc' });
| Pattern | When to use |
|---|---|
| useState | Simple, independent state values |
| useReducer | Complex state logic, multiple sub-values, next depends on previous |
Effect Hooks
// Run after every render
useEffect(() => { ... });
// Run once on mount
useEffect(() => { ... }, []);
// Run when dep changes
useEffect(() => { ... }, [dep]);
// Cleanup on unmount / before re-run
useEffect(() => {
const sub = subscribe();
return () => sub.unsubscribe(); // cleanup
}, [dep]);
| useEffect | Side effects (data fetch, subscriptions, DOM mutations) — after paint |
| useLayoutEffect | Same as useEffect but fires synchronously after DOM mutations (before paint) |
| useInsertionEffect | CSS-in-JS libs only — fires before layout effects |
Ref Hooks
// DOM ref
const inputRef = useRef(null);
<input ref={inputRef} />
inputRef.current.focus();
// Mutable value (no re-render on change)
const prevValue = useRef(value);
useEffect(() => { prevValue.current = value; });
| useRef(initial) | Mutable .current container, persists across renders, no re-render |
| useImperativeHandle | Customize ref handle exposed to parent (used with forwardRef) |
Performance Hooks
// Cache expensive calculation
const total = useMemo(() => items.reduce(...), [items]);
// Stable function reference (for child props / deps)
const handleClick = useCallback(() => {
doSomething(id);
}, [id]);
| Hook | Caches | Use when |
|---|---|---|
| useMemo | Value | Expensive computation, stable reference for memo children |
| useCallback | Function | Function passed as prop to memo component or in useEffect deps |
Context & Other Hooks
const ThemeCtx = createContext("light");
// Provider (wrap children)
<ThemeCtx.Provider value="dark">...</ThemeCtx.Provider>
// Consumer
const theme = useContext(ThemeCtx);
| useContext(Context) | Subscribe to context value (re-renders when context changes) |
| useId() | Stable unique ID for accessibility attributes (React 18) |
| useDebugValue(val) | Display label in React DevTools for custom hooks |
React 18+ Hooks
| useTransition() | Mark state update as non-urgent to keep UI responsive |
| useDeferredValue(val) | Defer re-rendering of non-urgent child (like debounce built-in) |
| useSyncExternalStore(sub, snap) | Subscribe to external store (Redux, Zustand internals) |
| use(Promise) | Await a promise inside a component (React 19) |
| useOptimistic(state, fn) | Optimistic UI updates while async action completes (React 19) |
| useFormStatus() | Pending state of parent form action (React 19) |