Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Concurrent Rendering». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Визначення простими словами

**Concurrent Rendering** - це механізм, який дозволяє React **виконувати рендеринг асинхронно**, **розбиваючи** його на частини і **керуючи пріоритетами**.
Завдяки цьому React може **зупиняти**, **переривати**, **відновлювати** і **відкладати** оновлення користувацького інтерфейсу, щоб UI залишався **плавним і чутливим**, навіть якщо застосунок обробляє великі обсяги даних або складні обчислення.

## Суть ідеї

До React 18 рендеринг був **синхронним**:

> Якщо React починав перемальовувати компонент, він **не міг зупинитися**, поки не завершить процес цілком.

Це означало, що довгий рендер міг **«заморозити» інтерфейс**: користувач натискає кнопку, а UI зависає, поки React завершує роботу.

Тепер, з Concurrent Rendering:

> React може **поставити рендер на паузу**, обробити важливішу подію (наприклад, ввід користувача), а потім **відновити** або **скасувати** попереднє оновлення.

## Як це працює всередині

React 18 впровадив новий механізм у своєму ядрі: **Fiber Concurrent Mode**.
Тепер кожен «Fiber» (внутрішній вузол дерева компонентів) може мати пріоритет і «стан виконання».

Приблизно це виглядає так:

1. React починає рендер компонента.
2. Якщо користувач виконує важливу дію (наприклад, друкує в input), React **зупиняє поточний рендер**.
3. Обробляє дію користувача.
4. Потім **відновлює** або **перераховує** рендеринг з новими даними.

## Приклад на практиці

Припустимо, користувач друкує текст, а ти фільтруєш великий список у реальному часі.

Без Concurrent Rendering:

```javascript
// React 17
setFilter(value); // кожен ввід змушує перерендерити весь список синхронно
```

Поки React рендерить список, поле вводу може лагати.

З Concurrent Rendering (React 18):

```javascript
const [isPending, startTransition] = useTransition();

function handleChange(e) {
  const value = e.target.value;
  startTransition(() => {
    setFilter(value); // це «низькопріоритетне» оновлення
  });
}
```

Тепер:

- React спочатку **оновить текст в input** (високий пріоритет).
- Потім, коли буде час, оновить відфільтрований список (низький пріоритет).
Результат: інтерфейс залишається **миттєво чутливим**.

## Порівняння «старого» і «Concurrent» рендерингу

| Характеристика | Старий (Legacy Rendering) | Concurrent Rendering |
|---|---|---|
| Модель виконання | Синхронна, блокуюча | Асинхронна, переривна |
| Пріоритети | Усі оновлення рівні | Оновлення мають пріоритет |
| Можливість скасувати рендер | Ні | Можна скасувати / відновити |
| Продуктивність при великих даних | UI може зависнути | UI залишається чутливим |
| Основна мета | Простота реалізації | Гнучкість і плавність UI |

## Де використовується Concurrent Rendering

Concurrent Rendering вмикається **автоматично**, якщо ти використовуєш новий API:

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

Усі нові можливості React 18+ (наприклад `useTransition`, `useDeferredValue`, `Suspense` з SSR, `startTransition`) працюють саме завдяки цьому механізму.

## Важливо розуміти

- Concurrent Rendering **не означає паралельне виконання в кількох потоках**: React все ще працює в одному потоці JavaScript.
- «Concurrent» тут означає, що React **може чергувати** різні завдання, не блокуючи потік повністю.
- Ти сам вирішуєш, які оновлення мають бути «терміновими», а які можна відкласти.

## Підсумок

> **Concurrent Rendering** - це механізм, який робить React розумнішим:
> він дозволяє **пріоритизувати оновлення**, **уникати фризів інтерфейсу** і **створювати відчуття плавності**, особливо у великих і інтерактивних застосунках.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати475 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.