Concurrent Rendering

ReactMiddle~2 хв читання

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

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

Суть ідеї

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

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

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

Тепер, з Concurrent Rendering:

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

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

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

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

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

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

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

Без 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 розумнішим: він дозволяє пріоритизувати оновлення, уникати фризів інтерфейсу і створювати відчуття плавності, особливо у великих і інтерактивних застосунках.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.