Concurrent Mode

ReactMiddle~4 min read

1. What "Concurrent Mode" was (historically)

Before React 18, the React team was experimenting with a new rendering engine, Concurrent Mode. It was an experimental mode that completely changed how React renders the component tree.

The goal of Concurrent Mode: make React asynchronous so it could pause, resume, and cancel rendering parts of the UI, without blocking the main JavaScript thread.

In simpler terms:

React wanted to "think ahead", render parts of the interface in the background, and show them once they were ready.

This opened the door to:

smooth transitions between screens,
loading data without the UI "jittering",
better responsiveness under load.

2. The problem with the old approach

In React 17 and earlier:

rendering was synchronous, once React started a re-render, it had to finish it entirely;
the UI could "freeze" while React rendered large lists or heavy components;
there was no flexible way to manage priorities (for example, distinguishing "urgent" from "background" updates).

Concurrent Mode was meant to fix this.

3. What Concurrent Mode could do

When it appeared (in React 16.8-17, in experimental builds), enabling the mode looked roughly like this:

javascript

ReactDOM.createRoot(rootElement, { concurrent: true });

This activated a new "asynchronous" rendering engine, where React could:

pause rendering,
cancel an intermediate result,
resume it,
show a partially ready UI (partial hydration, streaming SSR).

4. Why "Concurrent Mode" was abandoned

The React team realized: a "mode" implies you can turn it on or off, and that breaks the ecosystem, libraries would need to know which mode they were running in.

Many developers were afraid to enable "Concurrent Mode" because it broke compatibility with older libraries that were not built for interruptible rendering.

A quote from the React Blog: "Concurrent Rendering is not a new mode that you turn on - it's a set of features that you can use when you need them."

5. The move to "Concurrent Features"

With the release of React 18 (March 2022), the React team changed its philosophy:

No more separate mode. Instead, a set of features that are enabled as needed.

Now everything runs within a single engine, the new concurrent-rendering core. And concurrent capabilities are activated automatically when you use a modern API.

6. What "Concurrent Features" includes now

Here are the main features built on Concurrent Rendering:

Feature	What it does
Automatic Batching	React batches several `setState` calls into a single render, even in asynchronous contexts
Transitions (`useTransition`, `startTransition`)	Let you defer low-priority updates (for example, filtering, search)
Suspense for Data Fetching	Lets React "wait" for data (a Promise) and show a fallback UI
Streaming SSR (`renderToPipeableStream`)	Lets the server stream HTML without waiting for the entire page
Selective Hydration	The client hydrates only the parts of the page that are already visible / needed
useDeferredValue	Lets you "defer" computing unimportant data so it doesn't block rendering

All of these features run on top of a single concurrent engine, but they are enabled selectively, when you use the corresponding APIs.

7. How this is enabled now

Previously, through a "mode":

javascript

ReactDOM.render(<App />, root); // regular
ReactDOM.createRoot(root, { concurrent: true }); // Concurrent Mode (old)

Now, simply through the new API:

javascript

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

That's it: React now uses the concurrent renderer by default. No "modes", "flags", or "breaking changes".

8. The main difference in philosophy

Before (Concurrent Mode)	Now (Concurrent Features)
A mode (turned on/off)	A set of capabilities (enabled automatically)
Required full library adaptation	Compatible with older libraries
Could break behavior	Safe and gradual
Experimental	Stable and production-ready
Activated manually	Works through `createRoot()`

9. Summary

Concurrent Mode was an early experiment where React tried to make rendering "asynchronous" at the core level.

Concurrent Features is a modern, stable implementation of the same ideas, but as flexible APIs that can be enabled as needed.

In short:

Term	What it means	Status
Concurrent Mode	The old experimental mode, fully concurrent rendering	Removed, not used
Concurrent Features	Modern stable capabilities (Transitions, Suspense, Streaming SSR, etc.)	Used since React 18+
Concurrent Rendering	The internal mechanism underlying all of these capabilities	Always active with `createRoot()`

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.