Suggest an edit

Improve this article

Refine the answer for “What is Concurrent Rendering?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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:

1. Splits the Virtual DOM tree into **Fiber nodes** (units of work).
2. Each node can be processed **independently**.
3. 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 |

---

## Why this matters

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**.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts761 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.