Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Commit Phase проти Render Phase». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Коротко:

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 |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати572 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.