tsxANYreacthooksuseStatestate
tsx
const [count, setCount] = useState(0);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.
tsxANYreacthooksuseStateupdater
tsx
setCount(prev => prev + 1);Prefer the updater form when the next state depends on the previous state.
tsxANYreacthooksuseStateperformance
tsx
const [items, setItems] = useState(() => loadInitialItems());Pass a function to avoid recalculating expensive initial state on every render.
tsxANYreacthooksuseReducerstate
tsx
const [state, dispatch] = useReducer(reducer, initialState);`useReducer` is useful when state transitions are more complex or action-driven.
tsxANYreacthooksuseReducerlazy-init
tsx
const [state, dispatch] = useReducer(reducer, initialArg, init);The third `init` argument lazily computes the initial reducer state.
tsxANYreacthooksuseStateforms
tsx
const initialForm = { email: '', password: '' };
const [form, setForm] = useState(initialForm);
const resetForm = () => setForm(initialForm);Useful for form reset behavior after submit or cancel.
Effect Hooks
Synchronization and side effects.
tsxANYreacthooksuseEffecteffects
tsx
useEffect(() => {
document.title = `Count: ${count}`;
}, [count]);Use effects to synchronize with external systems like DOM APIs, subscriptions, timers, and network calls.
tsxANYreacthooksuseEffectcleanup
tsx
useEffect(() => {
const id = setInterval(tick, 1000);
return () => clearInterval(id);
}, []);Return a cleanup function to unsubscribe, cancel, or undo the effect on dependency change or unmount.
tsxANYreacthooksuseLayoutEffectlayout
tsx
useLayoutEffect(() => {
inputRef.current?.focus();
}, []);Reserve `useLayoutEffect` for measurement or layout-sensitive updates; prefer `useEffect` by default.
tsxANYreacthooksuseInsertionEffectcss-in-js
tsx
useInsertionEffect(() => {
injectStyles(ruleText);
}, [ruleText]);Library-oriented hook for style injection use cases.
tsxANYreacthooksuseEffectfetch
tsx
useEffect(() => {
let ignore = false;
fetch(`/api/users/${userId}`)
.then(r => r.json())
.then(data => { if (!ignore) setUser(data); });
return () => { ignore = true; };
}, [userId]);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]);Use for event-like logic called from effects that should see fresh values.
Context and Ref Hooks
Context consumption and imperative references.
tsxANYreacthooksuseContextcontext
tsx
const theme = useContext(ThemeContext);Use context to avoid repetitive prop drilling for shared values like theme, auth, locale, or configuration.
tsxANYreacthooksuseRefdom
tsx
const inputRef = useRef<HTMLInputElement | null>(null);
inputRef.current?.focus();Refs are useful for DOM access, timers, imperative APIs, or mutable values that do not trigger re-renders.
tsxANYreacthooksuseRefmutable
tsx
const latestValue = useRef(value);
latestValue.current = value;Common for storing previous values, AbortControllers, or instance-like fields.
tsxANYreacthooksuseImperativeHandlerefs
tsx
useImperativeHandle(ref, () => ({
focus: () => inputRef.current?.focus(),
clear: () => setValue(''),
}), []);Use with `forwardRef` when a parent truly needs an imperative child API.
tsxANYreacthooksuseIda11y
tsx
const id = useId();
return <><label htmlFor={id}>Email</label><input id={id} /></>;Useful for accessibility when components need unique IDs that work consistently with server rendering.
tsxANYreacthooksuseDebugValuecustom-hooks
tsx
function useOnlineStatus() {
const [isOnline, setIsOnline] = useState(true);
useDebugValue(isOnline ? 'Online' : 'Offline');
return isOnline;
}Primarily helpful in reusable hooks that appear in DevTools.
Performance and Concurrency Hooks
Memoization, deferred rendering, transitions, and external store subscriptions.
tsxANYreacthooksuseMemoperformance
tsx
const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);Use when a recalculation is expensive or when referential stability matters for child memoization.
tsxANYreacthooksuseCallbackperformance
tsx
const handleSubmit = useCallback(() => {
saveForm(form);
}, [form]);Useful when child components depend on stable callback identity.
tsxANYreacthooksuseTransitionconcurrency
tsx
const [isPending, startTransition] = useTransition();
startTransition(() => {
setQuery(nextQuery);
});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]);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);For libraries or app code integrating with non-React stores while preserving concurrent rendering correctness.
tsxANYreacthooksusesuspense
tsx
const theme = use(ThemeContext);
const product = use(productPromise);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.