Hook · Concurrency
useTransition
Low-priority updates
useTransition marks an update as 'non-urgent'. React processes it without blocking user input and gives you an isPending flag to show intermediate feedback.
Urgent vs transition
Typing in an input is urgent: the character must appear instantly. Recalculating a filtered list of 10,000 items is a transition: it can wait a couple of frames without feeling sluggish.
The pattern
const [isPending, startTransition] = useTransition(). Wrap only the slow setState inside startTransition(() => ...). Everything else remains urgent.
Common pitfalls
- 01startTransition does not defer the UI update indefinitely — React still processes it as soon as it can.
- 02You cannot mark DOM events (like onChange) as transitions — only state updates inside startTransition.
- 03isPending only reflects the transition, not any data loading behind it.
Was this helpful?
Sign in to give feedback