Concurrent Mode
1. Що таке «Concurrent Mode» (історично)
До React 18 команда React експериментувала з новим рушієм рендерингу: Concurrent Mode. Це був експериментальний режим, який повністю змінював те, як React рендерить дерево компонентів.
Мета Concurrent Mode: зробити React асинхронним, щоб він міг призупиняти, відновлювати і скасовувати рендеринг частин UI, не блокуючи головний потік JavaScript.
Простіше кажучи:
React хотів «думати наперед», рендерити частини інтерфейсу у фоні й показувати їх, коли вони готові.
Це відкривало шлях до:
- плавних переходів між екранами,
- завантаження даних без «смикання» UI,
- кращої чутливості під навантаженням.
2. Проблема старого підходу
У React 17 і нижче:
- рендеринг був синхронним: якщо React починав перемальовування, він мав завершити його повністю;
- UI міг «фризитися», поки React рендерить великі списки або важкі компоненти;
- не можна було гнучко керувати пріоритетами (наприклад, розрізняти «термінові» оновлення й «фонові»).
Concurrent Mode мав це вирішити.
3. Що вмів Concurrent Mode
Коли він з’явився (у React 16.8 - 17, в експериментальних білдах), увімкнення режиму виглядало приблизно так:
ReactDOM.createRoot(rootElement, { concurrent: true });Це активувало новий «асинхронний» рушій рендерингу, де React міг:
- призупиняти рендер (pause),
- скасовувати проміжний результат (cancel),
- відновлювати (resume),
- показувати частково готовий UI (partial hydration, streaming SSR).
4. Чому від «Concurrent Mode» відмовилися
Команда React зрозуміла: «режим» передбачає, що його можна увімкнути або вимкнути, а це розриває екосистему: бібліотеки мають знати, у якому режимі вони працюють.
Багато розробників боялися вмикати «Concurrent Mode», бо він ламав сумісність зі старими бібліотеками, які не були розраховані на переривний рендер.
Цитата з React Blog: "Concurrent Rendering is not a new mode that you turn on - it's a set of features that you can use when you need them."
5. Перехід до «Concurrent Features»
З виходом React 18 (березень 2022), команда React змінила філософію:
Більше жодного окремого режиму. Натомість: набір можливостей (features), які вмикаються за потреби.
Тепер усе працює в межах одного рушія: нового concurrent-rendering-core. А конкурентні можливості активуються автоматично, якщо ти використовуєш сучасний API.
6. Що тепер входить у «Concurrent Features»
Ось основні фічі, засновані на Concurrent Rendering:
| Feature | Що робить |
|---|---|
| Automatic Batching | React об’єднує кілька setState в один рендер, навіть в асинхронних контекстах |
Transitions (useTransition, startTransition) | Дозволяють відкладати низькопріоритетні оновлення (наприклад, фільтрацію, пошук) |
| Suspense for Data Fetching | Дозволяє React «чекати» дані (Promise) і показувати fallback-UI |
Streaming SSR (renderToPipeableStream) | Сервер може віддавати HTML потоками, без очікування всієї сторінки |
| Selective Hydration | Клієнт гідрує лише ті частини сторінки, які вже видно / потрібні |
| useDeferredValue | Дозволяє «відкласти» обчислення неважливих даних, щоб не блокувати рендер |
Усі ці фічі працюють поверх одного concurrent-рушія, але вмикаються вибірково, коли ти використовуєш відповідні API.
7. Як це тепер вмикається
Раніше: через «режим»:
ReactDOM.render(<App />, root); // звичайний
ReactDOM.createRoot(root, { concurrent: true }); // Concurrent Mode (старе)Тепер: просто через новий API:
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);Ось і все: тепер React використовує concurrent-renderer за замовчуванням. Жодних «режимів», «прапорців» чи «breaking changes».
8. Головна відмінність у філософії
| Було (Concurrent Mode) | Стало (Concurrent Features) |
|---|---|
| Режим (вмикається/вимикається) | Набір можливостей (вмикаються автоматично) |
| Вимагав повної адаптації бібліотеки | Сумісний зі старими бібліотеками |
| Міг ламати поведінку | Безпечний і поступовий |
| Експериментальний | Стабільний і готовий до продакшену |
| Активувався вручну | Працює через createRoot() |
9. Підсумок
Concurrent Mode - це ранній експеримент, де React намагався зробити рендеринг «асинхронним» на рівні ядра.
Concurrent Features - це сучасна, стабільна реалізація тих самих ідей, але у вигляді гнучких API, які можна вмикати за потреби.
Коротко:
| Термін | Що означає | Статус |
|---|---|---|
| Concurrent Mode | Старий експериментальний режим, повністю конкурентний рендеринг | Видалено, не використовується |
| Concurrent Features | Сучасні стабільні можливості (Transitions, Suspense, Streaming SSR та ін.) | Використовується з React 18+ |
| Concurrent Rendering | Внутрішній механізм, що лежить в основі всіх цих можливостей | Завжди активний при createRoot() |
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.