What is Concurrent Mode and what problems does it solve?

Concurrent React (enabled by default in React 18 with createRoot) lets React pause work in progress when something more urgent arrives, then resume it later.

Problems it solves:

• Blocking renders — expensive renders blocked the main thread, causing input lag. Now React can interrupt a slow render to handle a keypress.
• Tearing — reading from an external store during a render could give inconsistent UI. Concurrent React prevents this with useSyncExternalStore.
• Waterfall loading — with Suspense + concurrent features, React can start rendering before all data is ready.

// React 18 — opt in to concurrent features
import { createRoot } from 'react-dom/client';
createRoot(document.getElementById('root')).render();

// Now transitions, Suspense, startTransition all work correctly

New APIs enabled by concurrency:

• startTransition / useTransition — mark updates as non-urgent
• useDeferredValue — defer a value until the browser is idle
• Suspense for data fetching — show fallbacks while data loads
• useId — stable IDs for SSR