Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11useTransition lets React treat selected state updates as non-urgent work that can be interrupted when the user does something more urgent, such as typing. It can make an interface feel more responsive under competing rendering work; it does not make the underlying computation cheaper or guarantee a faster render.
What useTransition returns
useTransition is a React Hook. Call it at the top level of a component or custom Hook:
As an Amazon Associate I earn from qualifying purchases.
const [isPending, startTransition] = useTransition();isPending indicates that the Transition is pending. startTransition is the function used to mark state updates as Transitions. The Hook must be called from a component or custom Hook; outside a component, React also provides the standalone startTransition function, but that function does not provide the Hook’s pending indicator. See React’s useTransition reference and startTransition reference.
What happens when you call startTransition
The callback passed to startTransition runs immediately. React marks state updates scheduled synchronously inside that callback as Transition updates, which it can render in the background and interrupt for more urgent work.
#1 Best Overall
startTransition(() => {
setSelectedTab(nextTab);
});This does not delay the callback itself. It changes the priority of the state update scheduled inside it. The component needs access to the relevant state setter to mark that update with useTransition.
For example, if switching tabs starts rendering a heavy chart and the user begins typing, React can handle the input update first and restart the chart rendering afterward. That interruption is the mechanism behind the responsiveness benefit described in the React documentation; it is not evidence that the chart’s calculation became less expensive.
What it means for performance
useTransition is a scheduling tool, not a general rendering-speed optimization. It helps keep urgent interaction responsive when React has non-urgent rendering work to do. It does not guarantee that every render finishes sooner, nor does it reduce the work your component performs.
React’s documentation describes the scheduling behavior, but does not provide a numeric speedup or benchmark for a particular application. Measure your own interface if you need to determine whether a Transition improves its behavior.
How to show pending work
Use isPending to give local feedback while a Transition is pending. For example, you can style the button for a selected tab or show a small status beside the affected control rather than replacing already displayed content with a page-wide spinner.
The pending state is not a countdown or a promise that rendering will finish within a fixed time. React describes it as lasting until the Actions complete and the final state is displayed. A Transition can also help avoid hiding already revealed content around Suspense, but it does not remove the need to understand how the relevant Suspense boundary behaves.
Keep controlled text inputs synchronous
Do not put the state update that controls a text input inside a Transition. The input needs its value to update synchronously. Instead, keep the input state urgent and defer the expensive work that depends on it.
function Search({ results }) {
const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);
// Keep the input connected to query. Use deferredQuery for
// expensive results rendering that can lag behind typing.
return (
<>
<input value={query} onChange={event => setQuery(event.target.value)} />
<Results query={deferredQuery} results={results} />
</>
);
}React’s built-in Hooks documentation covers useDeferredValue, which is useful when the value being deferred comes from props or a custom Hook rather than a setter you own. The same principle applies to a component’s own input: defer dependent rendering, not the input’s controlled value.
Best Value
Choosing between useTransition, startTransition, and useDeferredValue
| Option | When it fits | Pending indicator |
|---|---|---|
useTransition |
Your component owns the setter for a non-urgent update and needs a local pending signal. | Yes: the Hook returns isPending. |
Standalone startTransition |
Code outside a component needs to mark a state update as a Transition. | No Hook-provided isPending. |
useDeferredValue |
You receive a value through props or a custom Hook, or a displayed result can lag behind a synchronous input value. | It does not return the isPending value provided by useTransition. |
For all three choices, keep controlled-input state synchronous. Choose based on who owns the setter and whether the deferred work needs a local pending indicator.
Delayed callbacks and async Actions
Call startTransition when delayed work runs
Because the callback passed to startTransition runs immediately, an update scheduled later inside a setTimeout is not marked as a Transition merely because the timer was created inside the callback. Call startTransition when the delayed callback actually runs.
setTimeout(() => {
startTransition(() => {
setView(nextView);
});
}, delay);Wrap state updates after await
In an async Action, state updates after an await currently need another startTransition wrapper under the documented limitation related to JavaScript async context:
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →startTransition(async () => {
const result = await loadData();
startTransition(() => {
setData(result);
});
});React also warns that custom async flows can finish out of order: an earlier request may resolve after a later one and overwrite its result. If you build that workflow yourself, account for request ordering. For common form and server-action use cases, React points developers to useActionState, form Actions, and Server Functions, which handle request ordering in those abstractions. These async and batching details describe current behavior and should not be treated as permanent API guarantees; see React’s current reference.
Current React release context
React’s September 9, 2026 release post says React 19.3 was available and describes ViewTransition as stable in that release. That release note is context for the current React version; it does not establish a useTransition performance improvement or API change. See React 19.3.
Quick Recap
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.
