Hooksadvanced
useTransition and Concurrent Updates
Learn how useTransition marks state updates as low priority so urgent interactions like typing stay responsive.
useTransition() returns a isPending flag and a startTransition function that lets you mark a state update as a transition — a lower-priority update that React is allowed to interrupt in favor of more urgent updates, like responding to a keystroke or a click. This is one of the core Concurrent React features introduced in React 18.
It's like a barista who starts making a complicated latte (the transition) but immediately drops it to take the next customer's urgent order (a keystroke) the moment they walk in, resuming or restarting the latte afterward, rather than making everyone wait in a strict queue.
Key Concepts
1
Without transitions, a single state update that triggers a large, expensive re-render (like refiltering a huge list on every keystroke) can make the whole app feel laggy, because React would otherwise treat that update with the same priority as the keystroke itself. Wrapping the expensive part in startTransition tells React it's fine to delay or even discard in-progress work on that update if something more urgent comes in.
startTransition
2
The isPending boolean lets you show a subtle loading indicator while the transition is still being computed, without blocking the rest of the UI (the input itself keeps responding immediately since it's updated outside the transition). This distinguishes useTransition from simply debouncing — debouncing delays the update; transitions let the update start immediately but can be preempted.
isPendinguseTransition
3
Interviewers connect this topic to the Fiber architecture and ask candidates to identify a realistic scenario (a search box refiltering a big list, or a tab switch loading a heavy panel) where wrapping the state update in a transition measurably improves perceived responsiveness versus a naive synchronous update.