Concurrent Rendering

Everything so far has treated a render as one indivisible job: call a setter, React 7,897 walks the tree, the DOM is updated. The main thread does one thing at a time, so while React renders two thousand rows the browser cannot paint the character just typed. The page freezes for as long as the render takes.

Concurrent rendering drops that assumption. Since React 18 the renderer can prepare an update in memory, stop partway to let the browser handle something urgent, resume, and discard the half-built result if it has become obsolete. Nothing reaches the DOM until a render is complete, so the user never sees a half-updated screen. In exchange you can mark an update not urgent.

A blocking render freezes input; an interruptible one yields between units of work
A blocking render freezes input; an interruptible one yields between units of work

The APIs here reach that scheduler: two ways to mark a Transition, a way to lag a value behind, the boundary that catches a component whose data is missing, and the hooks that stay correct when a render can be discarded.

Subsections