What is React Concurrent Mode?

Concurrent Mode (React 18, enabled by createRoot) is a set of new capabilities that allow React to interrupt rendering work and prioritize more important updates. In legacy mode, rendering was synchronous and uninterruptible — once started, it had to finish. In Concurrent Mode, React can: (1) Interrupt a low-priority render to handle a high-priority update (like user input). (2) Abandon work that is no longer needed (e.g., if the user navigates away). (3) Reuse previously computed work. (4) Prepare multiple UI states simultaneously. Enabling: ReactDOM.createRoot(document.getElementById("root")).render(<App />); — all React 18 apps should use createRoot. New features enabled by Concurrent Mode: useTransition, useDeferredValue, Suspense for data fetching, automatic batching, streaming SSR. Important: components must be pure (no side effects during render) for concurrent rendering to work correctly — the render function may be called multiple times. This is why Strict Mode double-invokes renders — to surface purity violations.