Keep navigation responsive
A component changes tabs or navigates between views and the next view may require substantial rendering.
React 19+ · Function
startTransition
startTransition marks synchronous state updates as non-urgent Transitions. React can render the affected UI in the background while keeping urgent interactions responsive.
How it works
Call startTransition with a synchronous action that performs state updates. React invokes the action immediately and treats state updates scheduled during that call as non-urgent Transitions, allowing background rendering; use useTransition instead when pending status must be displayed.
Syntax
startTransition(action)Parameters
| Name | Type | Description |
|---|---|---|
action | function | A synchronous function that updates state by calling one or more setter functions. React invokes it immediately without arguments and marks synchronous updates during its execution as Transitions. |
Returns
Nothing.
Key points
- Use it for state changes whose rendering can happen without blocking urgent user interactions.
- Wrapping a setter call changes how React schedules that update rather than changing the state value itself.
- The normal pattern is to place one or more state setter calls inside the function passed to startTransition.
Common mistakes
- Use useTransition when the UI needs an isPending value or another pending indicator.
- The callback is not deferred like setTimeout; do not expect startTransition to postpone executing the action.
- Only updates made synchronously inside the callback are marked; updates after asynchronous work need another transition wrapper.
Example: Marking a tab update as a Transition
import { startTransition, useState } from 'react';
export default function TabContainer() {
const [tab, setTab] = useState('about');
function selectTab(nextTab: string) {
startTransition(() => {
setTab(nextTab);
});
}
return (
<>
<button onClick={() => selectTab('about')}>About</button>
<button onClick={() => selectTab('posts')}>Posts</button>
<p>Selected tab: {tab}</p>
</>
);
}Wraps a non-urgent tab-selection update so React can render it in the background without blocking more urgent interactions.
When to use it
Start a Transition outside Hooks
A library or event handler outside a component needs to classify a state update as non-urgent.
Preserve the current UI
A state update should avoid replacing the current UI with an unnecessary loading indicator during background rendering.
Interview questions
QWhat does startTransition do?
startTransition marks state updates performed by its synchronous callback as Transitions. React treats those updates as non-urgent and can render them in the background.
Follow-up: How do you show progress for the transition? Use useTransition, whose returned startTransition is paired with an isPending flag.
QIs the callback deferred?
The action is called immediately with no arguments. State updates scheduled synchronously while it runs receive Transition priority.
Follow-up: Would setTimeout inside the callback automatically remain part of the Transition? No; delayed updates occur outside the synchronous callback and must be wrapped separately.
QWhen should you use startTransition instead of useTransition?
startTransition returns nothing and does not expose pending state. It is useful outside components or Hooks, such as in a data library.
Follow-up: Which API is preferable inside a component when pending UI is needed? useTransition, because it supplies isPending and a transition function.
Related
useTransitionuseDeferredValueSuspenseaddTransitionType