What does useTransition do, and when would you use it?
useTransition lets you mark a state update as non-urgent. React keeps the UI responsive for urgent updates like typing and can interrupt the slow update. It also gives an isPending flag to show a loading hint.
Explain it simply
Imagine a canteen where quick tea orders are served immediately, while a big catering order waits in the background. If a tea order arrives, the kitchen pauses the big one. useTransition marks an update as the big order.
When a tab click renders an expensive list, wrap the state change in startTransition. The input or button stays responsive, and React renders the new list in the background. If the user clicks again, the old, unfinished work is thrown away.
isPending is true while the transition is in progress, so you can dim the old content instead of showing a blank screen. It does not make the work faster; it changes priority.
Example
function Tabs() {
const [tab, setTab] = useState("home");
const [isPending, startTransition] = useTransition();
function select(next) {
startTransition(() => setTab(next)); // low priority update
}
return (
<div style={{ opacity: isPending ? 0.6 : 1 }}>
<button onClick={() => select("reports")}>Reports</button>
<TabContent tab={tab} />
</div>
);
}What to say in the interview
"useTransition marks a state update as non-urgent so React can keep urgent work like typing responsive and interrupt the slow render. isPending lets me show a pending state. It does not speed up the work, only prioritises it, and the transition callback should only contain state updates."
Common mistakes
- Wrapping the controlled input's own update in a transition, which makes typing lag.