Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
useTransition lets React treat selected state updates as non-urgent rendering work, so more urgent interactions—such as typing—can be handled first. It can make an interface feel more responsive when updates compete for rendering time; it does not make the underlying computation cheaper or guarantee that every render finishes sooner.
What useTransition returns
Call useTransition at the top level of a React component or custom Hook. It returns exactly two values: isPending and startTransition.
const [isPending, startTransition] = useTransition();startTransition marks state updates scheduled synchronously inside its callback as Transitions. The callback itself runs immediately; React may render the resulting update in the background and interrupt that work to handle a more urgent update.
How a Transition changes rendering priority
Use a Transition for a state change whose resulting view can wait briefly behind urgent interaction—for example, selecting a tab that renders a heavy chart. Put the state update inside the callback:
#1 Best Overall
function selectTab(nextTab) {
startTransition(() => {
setTab(nextTab);
});
}If React is rendering the chart for that Transition and the user starts typing, React can handle the input update first and restart the chart rendering afterward. The benefit is scheduling and responsiveness under competing work, not a reduction in the cost of rendering the chart. The official React documentation provides no numeric speedup or benchmark for a particular application.
What isPending tells you
isPending is true while the Transition’s Actions are pending and becomes false when they complete and the final state is displayed. It is a signal for interface feedback, not a promise that rendering will finish within a particular time.
Use it for a localized treatment, such as indicating that a selected tab is loading, while keeping existing content visible where possible. Around Suspense, a Transition can avoid hiding already revealed content while waiting as needed; nested Suspense boundaries still determine their own behavior.
Recommended Free Tools
Keep controlled text input updates urgent
Do not put the state update that controls a text input inside a Transition. Controlled inputs need their value updated synchronously, or typing can fail to behave as expected.
Instead, keep the input state urgent and defer the expensive dependent view. If the component owns the relevant setter, keep separate state for the input and the view, and mark only the view update as a Transition. If the value comes from props or a custom Hook, consider useDeferredValue to let the displayed result lag behind the current input.
Choose the right React API
| API | Use it when | Pending indicator |
|---|---|---|
useTransition |
The component owns the setter for a non-urgent update and needs local pending feedback. | Yes: it returns isPending. |
startTransition |
Code outside a component needs to mark an update as a Transition. | No Hook-provided isPending. |
useDeferredValue |
The component receives a value through props or a custom Hook, or a displayed result should lag behind a synchronous input value. | It does not return the isPending value supplied by useTransition. |
In all three cases, keep controlled text input state urgent. Defer the expensive work that depends on it, rather than the input’s own value.
Async Actions, timers, and request ordering
Wrap updates after await
In an async Action, state updates scheduled after an await currently need another startTransition wrapper. React documents this as a limitation related to JavaScript async context:
startTransition(async () => {
const result = await fetchResult();
startTransition(() => {
setResult(result);
});
});Call startTransition when delayed work runs
The callback passed to startTransition runs immediately. If a state update is scheduled later in a setTimeout, it is not marked as a Transition by an earlier call. Call startTransition inside the delayed callback around the update itself.
Best Value
Guard custom requests against out-of-order completion
With custom async flows, an earlier request can finish after a later one and overwrite its result. If the latest request should win, manage that ordering in the application. For common form and server-action cases, React points to useActionState, form Actions, and Server Functions, which handle request ordering in those abstractions.
React currently batches multiple concurrent Transitions together. Treat this and the async-context behavior as current caveats, not permanent API guarantees.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.When to use a Transition—and when not to
- Use
useTransitionwhen the component owns a setter for a non-urgent update and needs pending UI feedback. - Use standalone
startTransitionwhen code outside a component marks an update and does not need the Hook’s pending indicator. - Use
useDeferredValuewhen the value to defer comes from props or a custom Hook, or when an expensive result should trail a synchronous input. - Do not use a Transition for state that directly controls a text input.
React 19.3, available September 9, 2026, introduced a stable ViewTransition API, but that release information does not establish a change to useTransition or a performance improvement for it. See the React 19.3 release post.
Quick Recap
Official documentation
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
