The word concurrent suggests that React renders several components at the same instant. In the browser, most application JavaScript still runs on one main thread. React’s important capability is different: render work can be interruptible, prioritized, restarted, and even discarded before it reaches the DOM.
Render prepares; commit changes the world
React’s render phase calculates what the UI should become. The commit phase applies those changes and runs layout effects. Concurrent rendering makes preparation interruptible, but the commit remains atomic from the user’s perspective. The browser never displays half of one React commit.
This explains a core rule: rendering must stay pure. A component can be evaluated more than once without committing. Starting a request, mutating a global, or writing to storage during render can therefore create work that does not correspond to any visible UI.
Urgent and non-urgent updates
Typing into an input is urgent because every keystroke must feel immediate. Updating a large search result list can be non-urgent. A transition lets React prioritize the input and restart result rendering when another character arrives.
const [query, setQuery] = useState('')
const [filter, setFilter] = useState('')
function onChange(value: string) {
setQuery(value)
startTransition(() => setFilter(value))
}
The transition does not delay a network request automatically or make filtering faster. It changes the scheduling priority so stale preparation can be abandoned. If the filtering calculation itself monopolizes the thread inside one long function, it may still need restructuring or a worker.
Suspense defines a reveal strategy
A Suspense boundary is not just a spinner location. It says which region may wait independently and which existing content should remain visible during an update. Boundary placement controls whether navigation feels stable or whether the entire screen flashes to a fallback.
Effects observe committed reality
Because prepared renders can be discarded, effects belong to committed UI. Cleanup must fully undo setup, and code should tolerate setup-cleanup cycles during development. Thinking in terms of synchronization with a committed external resource makes effects far easier to design.
Concurrent React feels better when urgent feedback is small, non-urgent work is interruptible, and loading boundaries match the product’s visual structure. The feature is scheduling—not magic parallelism—and that mental model makes its tradeoffs much clearer.