Concurrent React & Suspense

Not all updates are equally urgent

Older React rendered every update synchronously and to completion — once it started, it could not stop, so a big re-render would block the browser and freeze typing. Concurrent React changes that: rendering is interruptible. React can start rendering an update, pause it to handle something more urgent, and resume later.

The insight is that some updates are urgent (typing into an input must feel instant) and some are non-urgent (re-filtering a huge list, loading a new page). Concurrent features let you tell React which is which, so the urgent work is never blocked by the heavy work.

What this module covers

Lesson	What you’ll learn
Transitions	useTransition and useDeferredValue — keep the UI responsive
Suspense & lazy	Declarative loading UI and code-splitting with React.lazy
Error boundaries	Catching render errors, and pairing with Suspense
use() & data fetching	The React 19 use() hook and render-as-you-fetch

The one mental model

flowchart TB
  urgent["Urgent update
(keystroke)"] --> render1["render immediately
(never blocked)"]
  nonurgent["Non-urgent update
(filter big list)"] --> render2["render in the background
(interruptible)"]
  urgent -.interrupts.-> render2

Urgent updates interrupt non-urgent ones

You mark the heavy update as non-urgent (a transition), and React renders it in the background where a keystroke can interrupt it. Suspense then handles the case where part of the tree isn’t ready yet (it’s loading data or code), showing a fallback declaratively instead of you juggling loading booleans.

⚛️ The mental shift

Stop thinking of rendering as one blocking, all-or-nothing pass. Concurrent React makes rendering interruptible and prioritized — the browser stays responsive because urgent updates jump the queue. You don’t schedule any of this by hand; you label updates (transition) and boundaries (Suspense), and React does the scheduling.

What does "concurrent" rendering allow that older synchronous rendering did not?

Running React on multiple CPU threads Interrupting an in-progress render to handle a more urgent update, then resuming Skipping the DOM entirely Rendering without components

How do you tell React which updates are non-urgent?

You cannot — React guesses You label them as transitions (e.g. with useTransition); React schedules them as interruptible background work You put them in a setTimeout You mark them urgent

What does Suspense handle?

Network retries Showing a declarative fallback while part of the tree is not ready (loading data or code) Global state Routing

Submit

Mark as complete