Urgent versus transition updates
Some updates are urgent, like showing the letter a user just typed. Others are non urgent, like filtering a big list from that input. startTransition marks an update as a transition so React keeps the urgent part snappy and renders the heavy part in the background.
- startTransition wraps the state update that is non urgent
- React renders the transition with lower priority, interruptible
- useTransition also gives an isPending flag for loading hints
Deferring a value
useDeferredValue takes a value and returns a lagging copy that updates after urgent work settles. It is useful when you do not own the update site, only the value you consume.
- The input stays on the fresh value, the list reads the deferred one
- React shows the previous result until the new render is ready
- Both APIs build on concurrent rendering to interrupt stale work
Choosing between them
Use startTransition when you control the setState call; use useDeferredValue when you only have the value flowing in.
Transition flow
Key idea
Transitions and deferred values separate urgent updates from heavy ones, so React commits the urgent change immediately and renders the expensive update at low priority, keeping input responsive.