commit phase VS 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

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