From blocking to interruptible
In the legacy model a render ran to completion and blocked the main thread. Concurrent rendering lets React prepare an update in the background and interrupt it if a higher priority update arrives, such as a user typing.
- React can pause, resume, or abandon a render in progress
- Updates carry a priority, urgent ones jump ahead
- The prepared tree is committed only when ready, never partially shown
What it enables
Concurrent rendering is the foundation for transitions, deferred values, and streaming Suspense. It does not make rendering faster, it makes the app stay responsive while large renders happen.
- A render is split into units of work between which React can yield
- Stale work is thrown away rather than wasted on screen
- You opt into concurrent behavior with APIs like startTransition
Tearing and safety
Because a render can be interrupted, reading external mutable state mid render risks tearing, where parts of the UI see different values. useSyncExternalStore exists to read external stores safely.
Interruptible work
Key idea
Concurrent rendering makes React work interruptible, so urgent updates like typing preempt large background renders, keeping the app responsive and committing only complete, consistent trees.