Concurrent Rendering

ReactMiddle~3 min read

Definition in simple words

Concurrent Rendering is a mechanism that lets React run rendering asynchronously, splitting it into parts and managing priorities. Thanks to this, React can stop, interrupt, resume, and defer user-interface updates, so the UI stays smooth and responsive, even if the application handles large volumes of data or complex computations.

The essence of the idea

Before React 18, rendering was synchronous:

If React started re-rendering a component, it could not stop until it finished the whole process.

This meant a long render could "freeze" the interface: the user clicks a button, and the UI hangs while React finishes its work.

Now, with Concurrent Rendering:

React can pause a render, handle a more important event (for example, user input), and then resume or cancel the previous update.

How this works internally

React 18 introduced a new mechanism into its core: Fiber Concurrent Mode. Now every "Fiber" (an internal node of the component tree) can have a priority and an "execution state".

Roughly, it looks like this:

React starts rendering a component.
If the user performs an important action (for example, typing into an input), React stops the current render.
It handles the user's action.
Then it resumes or recalculates the render with the new data.

An example in practice

Say the user is typing text, and you are filtering a large list in real time.

Without Concurrent Rendering:

javascript

// React 17
setFilter(value); // every keystroke forces the whole list to re-render synchronously

While React renders the list, the input field can lag.

With Concurrent Rendering (React 18):

javascript

const [isPending, startTransition] = useTransition();

function handleChange(e) {
  const value = e.target.value;
  startTransition(() => {
    setFilter(value); // this is a "low-priority" update
  });
}

Now:

React first updates the text in the input (high priority).
Then, when there is time, it updates the filtered list (low priority). The result: the interface stays instantly responsive.

Comparing "old" and "Concurrent" rendering

Trait	Old (Legacy Rendering)	Concurrent Rendering
Execution model	Synchronous, blocking	Asynchronous, interruptible
Priorities	All updates are equal	Updates have a priority
Can the render be canceled	No	Yes, it can be canceled / resumed
Performance with large data	The UI can hang	The UI stays responsive
Main goal	Simplicity of implementation	Flexibility and smoothness of the UI

Where Concurrent Rendering is used

Concurrent Rendering is turned on automatically if you use the new API:

javascript

import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);

All the new React 18+ capabilities (for example useTransition, useDeferredValue, Suspense with SSR, startTransition) work precisely thanks to this mechanism.

Important to understand

Concurrent Rendering does not mean parallel execution on multiple threads: React still runs on a single JavaScript thread.
"Concurrent" here means that React can interleave different tasks without blocking the thread entirely.
You decide for yourself which updates should be "urgent" and which can be deferred.

Summary

Concurrent Rendering is a mechanism that makes React smarter: it lets you prioritize updates, avoid interface freezes, and create a sense of smoothness, especially in large and interactive applications.

Short Answer

Interview ready

Premium

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