Interruptible rendering
Older React rendered an update in one uninterruptible pass, so a heavy update could block typing. Concurrent rendering lets React prepare an update in the background and interrupt it if something more urgent arrives.
The key tool is the distinction between urgent and non urgent updates.
- Typing in an input is urgent and must feel instant.
- Re rendering a large filtered list in response is non urgent and can wait.
startTransition and useTransition
Wrapping a state update in startTransition marks it as a transition, a non urgent update React may delay or interrupt to keep urgent ones snappy.
- useTransition also gives an isPending flag to show a subtle loading state.
- useDeferredValue lets a value lag behind, rendering expensive output from a slightly stale input.
Transitions do not make work faster. They change its priority so the interface stays responsive while heavy rendering proceeds.
Concurrency is about scheduling, letting urgent feedback jump ahead of bulk work.
Key idea
Transitions mark updates as non urgent so concurrent React can interrupt them, keeping urgent input responsive without making work faster.