Built-in Hooks

createContext's argument is a fallback used only when no matching provider sits above the consuming component. useContext then returns it silently instead of throwing. It is not an initial value, and a mounted provider never falls back to it.

The second argument controls re-runs: omitting it runs the effect after every render, an empty array runs it once after mount, and a populated array re-runs it only when one of the listed values changes.

useMemo calls the factory you pass and caches its return value; useCallback caches the function itself without ever calling it. They are one mechanism: useCallback(fn, deps) behaves exactly like useMemo(() => fn, deps).

useReducer takes a reducer function, an initial value, and an optional init function. It returns the current state and a dispatch function; calling dispatch with an action schedules an update whose next state React computes by running the reducer.

useRef returns a stable mutable object shaped { current: initialValue } that survives every render. Writing to .current mutates that object directly instead of going through React's update queue, so React is never notified and schedules no re-render.

useState returns a two-item array: the state value for the render that is currently running, and a setter function. That value is an ordinary local binding, so assigning to it tells React nothing — only calling the setter schedules a re-render.

useActionState returns a three-element array: [state, formAction, isPending] — the action's most recent return value, an action to hand to a form's action prop, and a boolean that is true while it runs. React calls the action with (previousState, formData).

useFormStatus reports on the nearest ancestor form, so a component that renders the form is not inside it and always sees pending false. Call the hook in a child component rendered within the form. It is exported by react-dom.

React stores each component's hooks as an ordered list and matches every call to a slot by position alone — hook calls carry no names or keys. Change the call order and a hook reads another hook's slot.

Put every hook call above the early return and branch inside the effect body, or lift the condition into the parent so the child component only mounts when a user exists. Never move a hook below the return.

The component reads from the nearest provider above itself, or the context default if there is none. A provider it renders sits below it in the tree, so it affects the children only, never the component that renders it.

React compares each dependency to the previous render's value with Object.is, and an object literal built during render is a brand-new reference every time, so the comparison always fails. Depend on the primitive page, or on a stable reference.

useLayoutEffect runs synchronously after React updates the DOM but before the browser paints, so React blocks the paint until it finishes; useEffect is deferred until after paint. Reach for useLayoutEffect when a measure-then-adjust step would otherwise flash.

useMemo is a performance hint, not a semantic guarantee: React may throw the cached value away and call the factory again even when the dependencies are unchanged. The factory runs during render, so it must be pure — no side effects.

The reducer mutated the existing state and returned the same object, so React's identity comparison sees no change and bails out of re-rendering. A reducer must be pure: never mutate the state it receives, and return a new object when anything changed.

use() claims no per-component state slot — it just reads an already-existing resource — so skipping or repeating the call cannot misalign anything. It must still be called inside a component or custom Hook, and never inside try/catch.

All three calls read the same count value from the current render, so all three request the same next value and the last one wins. Passing an updater function, setCount(c => c + 1), makes each call build on the previous result, giving plus three.

Use useTransition when you own the state update and can wrap the setter, since it also gives you an isPending flag. Use useDeferredValue when the slow render is driven by a value you only receive, or when you want the lag localized inside the slow component.

useDeferredValue returns the previous value on the render where value changes, so that render is fast. React then schedules a second, non-urgent background render with the new value, and that render can be interrupted and restarted if value changes again.

Yes — that is the canonical signal. Coupled fields updated together belong in one reducer, which moves the transition logic out of the handlers into one pure function, makes impossible combinations unrepresentable, and gives you something you can unit-test without rendering.

React compares the next state with the current one using Object.is. Pushing mutates the same array, so the reference is identical and React bails out. A new array from the spread is a different reference, so the update is seen. Treat the bail-out as a courtesy, not a guarantee.

React calls the function with one argument, a FormData object built from the form's named fields. There is no submit event, so nothing to preventDefault. After the function finishes, React automatically resets the form's uncontrolled inputs.

They behave identically. React 19 lets the context object itself be rendered as a provider, so <ThemeContext value={theme}> is the current form. <ThemeContext.Provider> still works and remains valid, with deprecation announced for a future release.

use(dataPromise) returns the value the promise fulfilled with. While the promise is pending, React suspends the component and shows the nearest Suspense boundary's fallback, so the component itself holds no loading state.

useId generates a unique string id that is identical on the server and on the client, so attributes like htmlFor and aria-describedby survive hydration. A random value differs between the two renders, and a module counter depends on render order, so both can produce mismatched markup.

useTransition() returns a two-item array, [isPending, startTransition]. State updates triggered inside the startTransition callback are marked non-urgent so React can let urgent input go first, and isPending is true while such an update is still rendering.

useOptimistic(state, updateFn) returns [optimisticState, addOptimistic]. Calling addOptimistic(value) inside an action immediately renders updateFn(currentState, value); when that action settles React drops the optimistic layer and renders the real state argument again.

The return value of a useEffect callback is reserved for the cleanup function, and an async function always returns a Promise, so React warns and you lose cleanup. Declare an async function inside the effect and call it.

React compares each dependency positionally against the previous render's array using Object.is, and returns the new function if any entry differs. A dependency allocated fresh each render — an inline object, array or unmemoized callback — never compares equal, so the cache always misses.