Commit Phase проти Render Phase

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

Коротко:

React проходить два етапи оновлення інтерфейсу:

Фаза	Що робить	Чи можна переривати?	Коли виконується
Render phase	Обчислює, що потрібно оновити (будує нове віртуальне дерево)	Так	У пам'яті (Virtual DOM)
Commit phase	Застосовує ці зміни в реальний DOM	Ні	У браузері (DOM)

1. Render Phase (фаза обчислення / підготовки)

Тут React визначає, які частини інтерфейсу потрібно оновити,
але ще не торкається DOM.

Що відбувається:

React викликає компоненти (або render() у класових);
будує нове дерево Fiber-вузлів (віртуальне дерево);
порівнює його зі старим деревом (diffing algorithm);
вирішує, які вузли:
- потрібно створити,
- які оновити,
- які видалити.

Важливо:
На цьому етапі користувач не бачить змін, усе відбувається «в пам'яті».

Особливості:

React може призупиняти цю фазу (асинхронний рендеринг);
може повторно почати її з самого початку (якщо, наприклад, надійшли нові дані);
може змінювати пріоритет завдань (введення користувача важливіше за оновлення списку).

Приклад:

Якщо ти викликав setState(…), React спочатку створює нове віртуальне дерево,
але не оновлює DOM одразу.

2. Commit Phase (фаза застосування)

Тут React вносить реальні зміни в DOM
і викликає відповідні хуки життєвого циклу.

Що відбувається:

React застосовує всі накопичені зміни:
- додає/видаляє/оновлює реальні DOM-елементи;
- запускає ефекти (useEffect, componentDidMount, componentDidUpdate);
- викликає layout-ефекти (useLayoutEffect).

Після завершення commit-фази користувач бачить оновлений UI.

Особливості:

Ця фаза не може бути перервана (інакше UI опиниться в «напівстані»);
Виконується дуже швидко, зазвичай за мілісекунди;
React вносить зміни одним пакетом, щоб уникнути мерехтіння.

Ілюстрація процесу

javascript

setState() → починається Render phase
   ↓
React викликає компоненти → створює нове Virtual DOM
   ↓
React порівнює старе і нове дерево (diffing)
   ↓
Вирішує: що оновити, видалити, додати
   ↓
(можна призупинити / відновити)
   ↓
Render phase завершена → починається Commit phase
   ↓
React вносить реальні зміни в DOM
   ↓
Виконуються useLayoutEffect і useEffect
   ↓
Користувач бачить оновлений UI

Різниця через аналогію

Уяви, що React - це будівельник.

Етап	Що робить React	Аналогія
Render Phase	Планує, що потрібно змінити: креслить новий план будинку	Архітектор робить креслення
Commit Phase	Втілює зміни в реальності: переставляє стіни і меблі	Будівельники роблять ремонт за планом

Що можна і не можна робити в цих фазах

Дія	Render Phase	Commit Phase
Викликати хуки (`useState`, `useContext`, `useMemo`)	Так	Ні
Змінювати DOM напряму	Ні	Так
Запускати побічні ефекти (`useEffect`)	Ні	Так
Обчислювати JSX	Так	Ні
Працювати з layout (`useLayoutEffect`)	Ні	Так

Приклад із хуками:

javascript

function Example({ count }) {
  useEffect(() => {
    console.log('useEffect: Commit phase');
  });

  console.log('Рендер компонента: Render phase');

  return <div>{count}</div>;
}

Коли count оновиться:

Спочатку React викликає компонент (Render phase);
Потім оновлює DOM (Commit phase);
Після цього запускає useEffect.

Підсумок

Параметр	Render Phase	Commit Phase
Мета	Обчислити, що потрібно оновити	Застосувати зміни
Де виконується	У пам'яті (Virtual DOM / Fiber tree)	У браузері (реальний DOM)
Чи можна перервати	Так	Ні
Тривалість	Може бути тривалою	Дуже коротка
Побічні ефекти	Не виконуються	Виконуються
Хуки	useMemo, useState, useContext	useEffect, useLayoutEffect

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

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

Premium

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