React Hooks Cheat Sheet
A searchable reference of React hooks and what each one does.
| Hook | What it does |
|---|---|
const [x, setX] = useState(0) | Declare a state variable with an initial value and a setter that triggers a re-render. |
useState(() => init()) | Pass an initializer function so an expensive initial value is computed only on the first render. |
setX(prev => prev + 1) | Pass an updater function to compute the next state from the latest previous value safely. |
const [s, dispatch] = useReducer(fn, init) | Manage complex or grouped state with a reducer function and dispatched action objects. |
useReducer(fn, arg, initFn) | Pass an init function so the starting reducer state is built lazily from an argument. |
setA(1); setB(2) | React 18 batches multiple state updates in one event into a single re-render, even inside promises and timeouts. |
setObj({ ...obj, key: value }) | Spread the previous object then override changed keys, because setters replace state rather than merge it. |
key={userId} | Change a component key to reset all of its internal state by forcing a remount. |
const full = first + last | Compute values from props or state during render instead of copying duplicates into state. |
useEffect(() => {...}) | Run a side effect after every render when you pass no dependency array. |
useEffect(fn, [a, b]) | Re-run the effect only when a value in the dependency array changes between renders. |
useEffect(fn, []) | Run the effect once after the first render, with cleanup on unmount. |
useEffect(() => cleanup) | Return a function from an effect to tear down subscriptions or timers before the next run and on unmount. |
useLayoutEffect(fn, deps) | Run synchronously after DOM mutations but before the browser paints, for reading layout. |
useEffect(fn, [count]) | Include every reactive value you read in the deps to avoid stale closures and missed updates. |
StrictMode: mount, unmount, remount | In development StrictMode runs each effect twice to surface missing cleanup logic. |
useEffect(subscribe, []) | Add an event listener on mount and remove it in the returned cleanup to avoid leaks. |
useEffect(fetchData, [id]) | Fetch data when an id changes and ignore stale responses with a cleanup flag. |
const value = useContext(MyContext) | Read the nearest provider value for a context and re-render when that value changes. |
const Ctx = createContext(def) | Create a context object whose default is used when no matching provider is above. |
const ref = useRef(0) | Hold a mutable value that persists across renders without causing a re-render when it changes. |
<input ref={inputRef} /> | Attach a ref to a JSX element so ref.current points to the DOM node after mount. |
useImperativeHandle(ref, () => ({ focus })) | Customize the instance value a parent receives through a forwarded ref. |
forwardRef((props, ref) => ...) | Pass a ref from a parent through your component down to a child DOM node in React 18. |
function Input({ ref }) {...} | In React 19 ref is a regular prop, so forwardRef is no longer required. |
const [d, setD] = useState(null) | Prefer state over a ref when a value should be shown in the UI, since refs do not re-render. |
const v = useMemo(() => compute(a), [a]) | Cache an expensive computed value and recompute only when a dependency changes. |
const fn = useCallback(() => f(a), [a]) | Cache a function identity so memoized children do not re-render needlessly. |
const Fast = memo(Component) | Skip re-rendering a component when its props are shallowly equal to the previous props. |
measure, then useMemo or memo | Reach for memoization only after profiling shows a real cost, since premature memoization adds complexity. |
const [pending, startTransition] = useTransition() | Mark state updates as non-urgent so urgent input stays responsive during heavy work. |
const deferred = useDeferredValue(value) | Defer re-rendering of an expensive view while showing the previous value first. |
startTransition(() => setState(next)) | Wrap a low-priority update so React can interrupt it for more urgent work. |
const style = useMemo(() => ({ w }), [w]) | Memoize an object or array so its reference stays stable across renders for dependency checks. |
memo(Component, areEqual) | Provide a comparison function to control exactly when a memoized component re-renders. |
function useToggle() {...} | Extract reusable stateful logic into a function whose name starts with use. |
call hooks only at the top level | Call hooks only at the top level of React functions, never inside loops, conditions, or nested functions. |
const id = useId() | Generate a stable unique id for accessibility attributes that matches on server and client. |
useDebugValue(label) | Label a custom hook value in React DevTools to make debugging easier. |
useSyncExternalStore(subscribe, getSnapshot) | Subscribe safely to an external store so reads stay consistent during concurrent rendering. |
const data = use(promise) | Read a promise or context during render; in React 19 the component suspends until it resolves. |
const [opt, addOpt] = useOptimistic(state) | Show an optimistic UI state immediately while an async action is still pending in React 19. |
const [state, action] = useActionState(fn, init) | Manage form state and pending status from an action function in React 19. |
const { pending } = useFormStatus() | Read the pending status of the parent form from inside a child component in React 19. |
No hooks match your search.
Runs entirely in your browser. Nothing you type is sent anywhere; open DevTools and watch the Network tab to verify zero requests.
What this tool does
This is a searchable quick reference for the React hooks you reach for every day, from managing state and running effects to reading context, holding refs, and tuning performance. Each row pairs a hook or common pattern with a plain-English note on what it does, accurate to React 18 and React 19. Type in the filter box to search across both columns, or tap a category button to focus on one concern. The whole list is built into the page, so it works offline and sends nothing anywhere.
How to use it
Start typing in the Filter box. Entering useState jumps
to the state hooks; entering effect surfaces every effect pattern; entering
memo shows the memoization tools. The category buttons
(State, Effects, Context and refs, Performance, Custom and other) narrow the table to one
family and combine with the text filter, so you can pick Performance and type
transition to zero in on the concurrent-rendering hooks. Clear the box to see
the full sheet again.
Common use cases
- Recalling the signature of a hook you use rarely, like
useImperativeHandleoruseSyncExternalStore. - Checking whether a value belongs in
useStateoruseRefbefore you write the component. - Teaching a teammate the difference between
useMemo,useCallback, andmemo. - Looking up the newer React 19 hooks such as
use,useActionState, anduseOptimistic. - Reviewing the core hooks and the rules of hooks before an interview or a new project.
Common pitfalls
- Missing effect dependencies. Leaving a value out of a
useEffectdependency array captures a stale value and causes missed updates. List every reactive value the effect reads. - Calling hooks conditionally. A hook placed inside an if block or a loop breaks the stable call order React relies on. Keep every hook at the top level of the component or custom hook.
- Over-memoizing. Wrapping everything in
useMemoanduseCallbackadds code and dependency arrays to maintain without a measured benefit. Profile first, then memoize the hot paths. - Mutating state directly. Changing an object or array in place does not trigger a render. Create a new value with a spread and pass it to the setter, or base the next value on the previous one with an updater function.
Frequently asked questions
- What is the dependency array in useEffect?
- The dependency array is the second argument to useEffect and controls when the effect re-runs. With no array the effect runs after every render; with an empty array it runs once after the first render and cleans up on unmount; with values inside, it re-runs whenever any of those values change between renders. You should list every reactive value the effect reads, because leaving one out captures a stale value and causes missed updates.
- What is the difference between useMemo and useCallback?
- Both cache something across renders and both take a dependency array, but they cache different things. useMemo remembers the result of calling a function, so it returns a computed value. useCallback remembers the function itself, so it returns the same function reference until a dependency changes. In fact useCallback(fn, deps) is just shorthand for useMemo that returns fn. Use useMemo for expensive calculations and useCallback to keep a callback stable for memoized children.
- What are the rules of hooks?
- There are two rules. First, call hooks only at the top level of a component or another hook, never inside loops, conditions, or nested functions, so React can match each hook to the same slot on every render. Second, call hooks only from React function components or from custom hooks, not from plain JavaScript functions. Following both keeps the order of hook calls stable, which is how React tracks their state.
- When should I use useRef vs useState?
- Use useState when a value should appear in the UI, because updating state triggers a re-render. Use useRef when you need a mutable value that persists across renders but should not cause a re-render, such as a timer id, a previous value, or a reference to a DOM node through ref.current. A quick test: if changing the value should update what the user sees, use state; otherwise a ref is a better fit.
- What is a custom hook?
- A custom hook is a plain function whose name starts with use and that calls other hooks to package reusable stateful logic. For example a useToggle or useLocalStorage hook lets several components share the same behavior without repeating it. Each component that calls the custom hook gets its own isolated state, because the hook just composes the built-in hooks; it does not share state between callers.
- Does this cheat sheet send anything anywhere?
- No. The entire hook list is baked into the page and all searching and filtering happen in your browser with JavaScript, so nothing you type is sent to any server. Open your browser DevTools and watch the Network tab while you search to confirm there are zero requests.
Cite this tool
For academic, journalistic, or technical references. Pick a format:
Citations use 2026 as the publication year. Access date is left as a fillable placeholder where the citation style expects one.