Frontend Beauty
ESC

Type to search the knowledge base.

useTransition

useTransition marks state updates as non-urgent: keep input snappy while heavy UI catches up, with isPending.

advanced3 min read
  • react
  • usetransition

Some updates must feel instant (typing in a text field). Others can wait a frame or more (filtering 10k rows). useTransition lets you mark a state update as a transition so React can keep the urgent UI responsive and treat the heavy update as interruptible work.

Docs: useTransition, useDeferredValue.

Pattern

function Search({ items }) {
  const [text, setText] = useState('');
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();

  return (
    <>
      <input
        value={text}
        onChange={(e) => {
          const next = e.target.value;
          setText(next); // urgent
          startTransition(() => {
            setQuery(next); // non-urgent list filter
          });
        }}
      />
      {isPending && <p aria-live="polite">Updating…</p>}
      <List items={items} query={query} />
    </>
  );
}

The input stays controlled by text without waiting for List to finish. isPending is true while the transition is outstanding — use for subtle pending UI, not a full-page blocker.

Versus debouncing

Debouncing delays when you start work. Transitions let React schedule work with known priority and interrupt it if newer updates arrive. You can combine both for network fetches; for pure CPU render cost, transitions are the React-native tool.

Versus useDeferredValue

useDeferredValue defers a value derived from urgent state. useTransition wraps the setState that causes heavy work. Same family of concurrent features.

What not to wrap

  • Controlled input value updates that must match keystrokes immediately (the urgent path).
  • Tiny updates where transition overhead helps nothing.
  • Logic that must commit before you read the DOM — may need flushSync instead (rare).

Interview out-loud

“useTransition marks updates as non-urgent so React can keep urgent UI like text inputs responsive while heavy list rendering catches up. isPending signals in-flight transitions. I pair urgent local state for the input with transition-updated state for expensive views.”

Further reading

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Related guides