tsx
const [count, setCount] = useState(0);Notes
Use `useState` when state updates are straightforward and local to a component.
React Hooks Cheat Sheet
Built-in React Hooks reference covering state, effects, refs, context, memoization, transitions, and store subscriptions.
Export
Copy the compact sheet, download it, or print it.
Download
`D` dense toggle · `C` copy all
State Hooks
Core state management hooks.
tsx
setCount(prev => prev + 1);Notes
Prefer the updater form when the next state depends on the previous state.
tsx
const [items, setItems] = useState(() => loadInitialItems());Notes
Pass a function to avoid recalculating expensive initial state on every render.
tsx
const [state, dispatch] = useReducer(reducer, initialState);Notes
`useReducer` is useful when state transitions are more complex or action-driven.
tsx
const [state, dispatch] = useReducer(reducer, initialArg, init);Notes
The third `init` argument lazily computes the initial reducer state.
tsx
const initialForm = { email: '', password: '' };
const [form, setForm] = useState(initialForm);
const resetForm = () => setForm(initialForm);Notes
Useful for form reset behavior after submit or cancel.
Effect Hooks
Synchronization and side effects.
useEffect after render
Run side effects after React commits updates.
tsxANYreacthooksuseEffecteffects
tsx
useEffect(() => {
document.title = `Count: ${count}`;
}, [count]);Notes
Use effects to synchronize with external systems like DOM APIs, subscriptions, timers, and network calls.
tsx
useEffect(() => {
const id = setInterval(tick, 1000);
return () => clearInterval(id);
}, []);Notes
Return a cleanup function to unsubscribe, cancel, or undo the effect on dependency change or unmount.
useLayoutEffect before paint
Run a layout-sensitive effect before the browser paints.
tsxANYreacthooksuseLayoutEffectlayout
tsx
useLayoutEffect(() => {
inputRef.current?.focus();
}, []);Notes
Reserve `useLayoutEffect` for measurement or layout-sensitive updates; prefer `useEffect` by default.
useInsertionEffect for CSS injection
Insert styles before layout effects.
tsxANYreacthooksuseInsertionEffectcss-in-js
tsx
useInsertionEffect(() => {
injectStyles(ruleText);
}, [ruleText]);Notes
Library-oriented hook for style injection use cases.
Fetch inside an effect
Fetch client-side data in an effect with cleanup guard.
tsxANYreacthooksuseEffectfetch
tsx
useEffect(() => {
let ignore = false;
fetch(`/api/users/${userId}`)
.then(r => r.json())
.then(data => { if (!ignore) setUser(data); });
return () => { ignore = true; };
}, [userId]);Notes
Guard against race conditions when multiple requests can finish out of order.
useEffectEvent for non-reactive effect logic
Read latest values in an effect event without re-triggering the effect.
tsxANYreacthooksuseEffectEventeffects
tsx
const onVisit = useEffectEvent((visitedUrl: string) => {
logVisit(visitedUrl, cart.length);
});
useEffect(() => {
onVisit(url);
}, [url]);Notes
Use for event-like logic called from effects that should see fresh values.
Context and Ref Hooks
Context consumption and imperative references.
tsx
const theme = useContext(ThemeContext);Notes
Use context to avoid repetitive prop drilling for shared values like theme, auth, locale, or configuration.
tsx
const inputRef = useRef<HTMLInputElement | null>(null);
inputRef.current?.focus();Notes
Refs are useful for DOM access, timers, imperative APIs, or mutable values that do not trigger re-renders.
useRef mutable container
Persist mutable values between renders without re-rendering.
tsxANYreacthooksuseRefmutable
tsx
const latestValue = useRef(value);
latestValue.current = value;Notes
Common for storing previous values, AbortControllers, or instance-like fields.
useImperativeHandle custom ref API
Expose a controlled imperative API to a parent ref.
tsxANYreacthooksuseImperativeHandlerefs
tsx
useImperativeHandle(ref, () => ({
focus: () => inputRef.current?.focus(),
clear: () => setValue(''),
}), []);Notes
Use with `forwardRef` when a parent truly needs an imperative child API.
useId for stable accessible IDs
Generate stable IDs for labels and ARIA relationships.
tsxANYreacthooksuseIda11y
tsx
const id = useId();
return <><label htmlFor={id}>Email</label><input id={id} /></>;Notes
Useful for accessibility when components need unique IDs that work consistently with server rendering.
useDebugValue in a custom hook
Label a custom hook in React DevTools.
tsxANYreacthooksuseDebugValuecustom-hooks
tsx
function useOnlineStatus() {
const [isOnline, setIsOnline] = useState(true);
useDebugValue(isOnline ? 'Online' : 'Offline');
return isOnline;
}Notes
Primarily helpful in reusable hooks that appear in DevTools.
Performance and Concurrency Hooks
Memoization, deferred rendering, transitions, and external store subscriptions.
useMemo memoized derived value
Cache an expensive derived computation.
tsxANYreacthooksuseMemoperformance
tsx
const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);Notes
Use when a recalculation is expensive or when referential stability matters for child memoization.
useCallback stable callback
Memoize a callback passed to children.
tsxANYreacthooksuseCallbackperformance
tsx
const handleSubmit = useCallback(() => {
saveForm(form);
}, [form]);Notes
Useful when child components depend on stable callback identity.
useTransition for non-urgent updates
Mark updates as transitions.
tsxANYreacthooksuseTransitionconcurrency
tsx
const [isPending, startTransition] = useTransition();
startTransition(() => {
setQuery(nextQuery);
});Notes
Transitions help keep urgent interactions responsive while scheduling less urgent UI updates.
useDeferredValue delay expensive rendering
Defer a value so expensive children lag behind urgent input.
tsxANYreacthooksuseDeferredValueperformance
tsx
const deferredQuery = useDeferredValue(query);
const results = useMemo(() => search(items, deferredQuery), [items, deferredQuery]);Notes
Useful for search UIs where input should stay responsive even if results are expensive to compute.
useSyncExternalStore subscribe to external state
Read and subscribe to an external store consistently.
tsxANYreacthooksuseSyncExternalStorestores
tsx
const snapshot = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot);Notes
For libraries or app code integrating with non-React stores while preserving concurrent rendering correctness.
use API with context or promise
Read context or promise values with the `use` API.
tsxANYreacthooksusesuspense
tsx
const theme = use(ThemeContext);
const product = use(productPromise);Notes
The `use` API can read context or suspend on promises in supported React environments.
More in React Hooks
React Hooks Recipes
Practical React Hooks recipes for UI interactions, timers, measurement, polling, and optimistic updates.
React Hooks with TypeScript
Type-safe React Hooks patterns for state, refs, reducers, and custom hooks.
React Hooks Pitfalls and Best Practices
Common React Hooks mistakes, stale closure issues, dependency pitfalls, and practical best practices.
React Hooks Patterns
Reusable custom hook patterns for UI state, data fetching, forms, persistence, and interaction handling.