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

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

Допрацюйте відповідь до «Що таке "commit phase" і "render phase"?». Ваші зміни проходять модерацію перед публікацією.

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

Контент

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

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

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

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

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

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:

1. **Before mutation phase** - викликається `getSnapshotBeforeUpdate()` (у класах).
2. **Mutation phase** - React оновлює DOM (додає/видаляє/змінює вузли).
3. **Layout phase** - React викликає:
  - `useLayoutEffect` (спочатку cleanup попереднього, потім нові)
  - `componentDidMount` / `componentDidUpdate`
4. **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` змінився:

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

---

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

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

---

## Підсумок

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

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

Для рев’юера

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

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