Suggest an edit

Improve this article

Refine the answer for “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 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:

1. React starts rendering a component.
2. If the user performs an important action (for example, typing into an input), React **stops the current render**.
3. It handles the user's action.
4. 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.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.