What is Concurrent Rendering?

ReactMiddle~3 min read

Definition in simple terms

Concurrent Rendering is a new mode of React operation in which React can interrupt, postpone, resume, and combine renders based on their priority.

In other words: React is no longer obligated to render everything at once, it can do it step by step, in the background, and react to important events faster.

Before React 18: "Blocking render"

Previously (before React 18):

React worked synchronously.
If a render started, it had to finish completely before the user could interact with the UI again.
This meant: a large component → the "UI freezes" even for a simple state update.

Example:

javascript

setCount(c => c + 1); // React immediately starts re-rendering the whole tree

Until the render finishes, React cannot process a click, a scroll, or text input. → the UI "freezes".

React 18: "Asynchronous (Concurrent) render"

Now React can:

split the render into parts (Fiber architecture),
pause it if a more important event appears (for example, a click),
finish it later, when the thread is free,
while still keeping the UI's state consistent (all or nothing).

An intuitive example

Imagine you have a React app where:

The user is typing in a search box,
And React is filtering a huge list (10000 items) in parallel.

Before React 18:

While the list was filtering, text input "lagged".

In React 18:

React marks the list update as "not urgent",
The user's input gets priority,
The list updates in the background, without blocking the interface.

How React does this

Thanks to the Fiber architecture, React now:

Splits the Virtual DOM tree into Fiber nodes (units of work).
Each node can be processed independently.
React can:

pause work on the tree;
preserve context;
resume later;
fully discard an unfinished render if new data arrives.

This makes React resemble a task scheduler inside the browser.

How Concurrent Rendering works, step by step

1. Render phase (can be interrupted)

React starts computing what needs to be updated.
If the browser reports "the user clicked" or "an animation is running", React pauses the render.

2. Commit phase (always synchronous)

When the render is finished, React commits the result to the DOM.
This is where effects run (useLayoutEffect, useEffect, componentDidMount).

Render can be "asynchronous", but Commit is always synchronous - React guarantees the UI never ends up "half updated".

Example (with `startTransition`)

javascript

import { useState, startTransition } from 'react';

function App() {
  const [text, setText] = useState('');
  const [list, setList] = useState([]);

  function handleChange(e) {
    const value = e.target.value;
    setText(value); // urgent update (UI)
    startTransition(() => {
      // not urgent (background) update
      setList(Array(5000).fill(value));
    });
  }

  return (
    <>
      <input value={text} onChange={handleChange} />
      <div>{list.map((item, i) => <p key={i}>{item}</p>)}</div>
    </>
  );
}

What startTransition() does:

Marks the update as "low priority".
React handles the user's input first (setText),
And then updates the list in the background (setList).

Result: the interface stays responsive.

What kinds of updates exist in Concurrent Rendering

Update type	Example	Priority
Urgent	input, clicks, navigation	High
Not urgent	filtering, loading more, visual updates	Low
Transitional (`startTransition`)	search, routes, background loading	Medium

How this affects the lifecycle

Phase	What changed
Render phase	now asynchronous and can be interrupted
Commit phase	stays synchronous
Effects (`useEffect`, `useLayoutEffect`)	can run and clean up several times (in dev / concurrent mode)
Mounting	can be "simulated" several times before the real commit (to check that effects are clean)

Reactive APIs added for Concurrent Rendering

API	Purpose
`startTransition()`	Mark an update as "not urgent"
`useTransition()`	Return an `isPending` flag and `startTransition`
`useDeferredValue()`	Defer applying a value (for example, a filter)
`useId()`	Generate stable IDs that are safe for async rendering
`useSyncExternalStore()`	Safely read external state in concurrent mode
`useInsertionEffect()`	Controlled style insertion in concurrent mode

The UI does not freeze during heavy operations. React can discard unnecessary updates (saving resources). It enables "seamless" transitions between states. It is the foundation for React Suspense, Streaming SSR, and Server Components.

Short Answer

Interview ready

Premium

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