Що таке "commit phase" і "render phase"?

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

React-компоненти проходять два основних етапи при оновленні UI:

Render phase (фаза рендеру) Commit phase (фаза коміту)

Загальна картина

Коли React вирішує оновити інтерфейс (наприклад, після зміни state чи props), він не одразу торкається DOM. Замість цього React проходить два етапи:

javascript

┌──────────────┐
│ Render phase │ -> обчислюємо, *що потрібно змінити*
└──────────────┘
        v
┌──────────────┐
│ Commit phase │ -> застосовуємо зміни в DOM
└──────────────┘

1. Render phase (фаза рендеру)

Що робить:

Викликає ваші компоненти як функції (function MyComponent() {...}).
Будує нове віртуальне дерево (Virtual DOM).
Порівнює нове дерево з попереднім (процес "reconciliation").
Визначає які саме зміни потрібно внести в реальний DOM.

Важливо:

На цій фазі React не змінює DOM.
Вона може бути перервана або виконана заново (у React 18 з concurrent rendering).
Виконується синхронно або асинхронно залежно від режиму (legacy/concurrent).

Хуки, які викликаються під час Render phase:

useMemo()
useCallback()
useContext()
useState() (повертає поточне значення)
виклик самої функції-компонента (повертається JSX)

Побічні ефекти (`useEffect`) не викликаються - вони відкладаються до commit phase.

2. Commit phase (фаза коміту)

Що робить:

Бере результат Render phase (різницю між старим і новим деревом).
Застосовує реальні зміни до DOM.
Викликає всі ефекти (useLayoutEffect, useEffect) і методи життєвого циклу (componentDidMount, componentDidUpdate).

Етапи всередині commit phase:

Before mutation phase - викликається getSnapshotBeforeUpdate() (у класах).
Mutation phase - React оновлює DOM (додає/видаляє/змінює вузли).
Layout phase - React викликає:

useLayoutEffect (спочатку cleanup попереднього, потім нові)
componentDidMount / componentDidUpdate

Passive effects phase - React викликає:

useEffect (асинхронно, після перемальовування екрана)

Приклад

javascript

function Example({ count }) {
  useEffect(() => {
    console.log('useEffect'); // викликається на commit phase
  });

  console.log('render'); // викликається на render phase

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

Якщо count змінився:

React викликає Example() -> render phase console.log('render')
React застосовує зміни в DOM -> commit phase
Потім викликає useEffect -> console.log('useEffect')

Ключові відмінності

Характеристика	Render phase	Commit phase
Мета	Визначити, що потрібно оновити	Застосувати зміни
Робота з DOM	Ні	Так
Може бути перервана	Так	Ні
Ефекти (`useEffect`)	Ні	Так
`useLayoutEffect`	Ні	Так
Виклик функцій-компонентів	Так	Ні
Синхронність	Може бути асинхронною	Завжди синхронна

Підсумок

Render phase - React обчислює, що потрібно змінити (чиста, без побічних ефектів).
Commit phase - React вносить зміни в DOM і викликає побічні ефекти.

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

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

Premium

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