Built-in Hooks

Yes. React guarantees the dispatch function returned by useReducer keeps the same identity for the component's whole lifetime, so it can be omitted from dependency arrays, passed to memoized children, and put in context without causing churn.

The third argument is a lazy initializer: React sets the initial state to init(initialArg) instead of initialArg, calling it only when the component mounts. It avoids rebuilding expensive initial state on every render and gives you one named function that also serves a reset.

useImperativeHandle replaces what the parent's ref points at with the object your createHandle function returns. The parent then sees only the methods you chose to expose, instead of the underlying DOM node or anything else inside the child.

In React 19, ref is an ordinary prop: accept it alongside the other props and pass it to the inner <input>. Before React 19, function components dropped ref, so you had to wrap them in forwardRef((props, ref) => ...).

A rejection is thrown out of the component during render, so the nearest error boundary above it renders its fallback. React does not support try/catch around use(), because that catch would also intercept the throw React uses to signal suspension.

The first form calls buildInitialState on every render and throws the result away after the first. The second passes the function itself, so React calls it only during the initial render. That lazy form matters when the computation is expensive.

getServerSnapshot is required whenever the component is server-rendered. React calls it on the server and again for the initial hydration render, so it must return a value available without browser APIs and identical on both sides. Omitting it makes React throw during server rendering.

useSyncExternalStore takes subscribe (registers React's change callback and returns an unsubscribe function), getSnapshot (reads the store's current value), and an optional getServerSnapshot used during server rendering. It returns the current snapshot and re-renders the component when that snapshot changes.

useActionState's isPending tracks that one specific action and is readable only where the hook is called. useFormStatus().pending tracks the enclosing form's submission and is readable from any descendant, so a shared SubmitButton reads that one and needs no props.

The exhaustive-deps rule compares the reactive values a hook's callback reads against the dependency array you wrote, reporting missing or unnecessary entries. Disabling it freezes that comparison forever, so later edits to the callback go unchecked.

React's Invalid hook call error has three documented causes: a rules violation, mismatched React and renderer versions, or more than one copy of React in the bundle. With a linked local library the third is almost always it — the library resolves its own node_modules copy of React.

Suspect two different context objects. useContext matches providers by the identity of the object returned by createContext, so a duplicated module or a duplicated React copy gives the provider and the consumer separate objects, and the consumer's upward walk finds no match.

Effects never run during server rendering, so useLayoutEffect is skipped and React logs a development warning about it. The server HTML carries the un-adjusted layout, and the correction happens only after hydration on the client.

React may discard a useMemo cache and re-run the factory, so that line can open extra sockets, and opening one during render is a side effect with no teardown. Create the socket in an effect keyed on url, hold it in a ref, and close it in the cleanup.

Rendering must be pure and repeatable: React may run a component twice, discard the result, or restart it. A ref is untracked mutable state, so render-phase reads can observe a value from a render nobody saw, and writes make the render impure. The one sanctioned exception is initialising a ref that is still null.

Every render creates a brand-new pending promise, so the component suspends, resumes, renders again, and starts another request — an endless loop. React does not cache promises created during a client render; the promise must be created outside render and passed in.

getSnapshot builds a new object on every call, so React's Object.is comparison of consecutive snapshots is never equal. React re-renders, reads again, sees another new object, and loops. Fix it by caching the snapshot object in the store and recomputing it only when the store is written.

The input's displayed text comes from that state, and the transition marked it non-urgent, so React may delay or restart the render that shows the typed character. React's rule is that transitions cannot control a text input. Keep the input's state urgent and defer only the expensive derived work.

A React 19 callback ref may return a cleanup function. When it does, React runs that cleanup on detach instead of calling the callback a second time with null, giving refs the same attach/cleanup shape that effects already have.

A function argument means updater, not value. React calls nextHandler with the current state and stores whatever it returns, so the state becomes that return value. Store a function by wrapping it: setHandler(() => nextHandler).

Call useId once and append a suffix per field, such as ${id}-email and ${id}-name. Three separate calls also work, but one call plus suffixes scales to any number of related attributes and keeps the shared prefix visible in the markup.

The standalone startTransition marks updates non-urgent exactly like the one from useTransition, but gives you no isPending flag. Because it is a plain import rather than a hook, it can be called outside components — in module-level code, store logic, or event callbacks where hooks are illegal.