jsschools

useTransition

Marks state updates as non-blocking transitions to keep the UI responsive.

Since React 18 Spec ↗

Syntax

const [isPending, startTransition] = useTransition()

Returns

array — A pair: a pending boolean and a startTransition function.

Examples

const [isPending, startTransition] = useTransition();

function onChange(e) {
  const value = e.target.value;
  startTransition(() => {
    setSearchQuery(value);
  });
}

{isPending && <Spinner />}

Notes

Updates inside startTransition are interruptible and lower priority, so urgent updates like typing stay responsive. isPending indicates the transition is in progress. The function passed to startTransition must be synchronous; do not await inside it before calling setState.

See also