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

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

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

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

Контент

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

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

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

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

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

## 1. Користувач викликає `setState()`

Уяви код:

```javascript
function Counter() {
  const [count, setCount] = useState(0);

return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
```

Коли користувач клікає на кнопку, викликається `setCount(count + 1)`.

---

## 2. React **створює "запит на оновлення" (update object)**

React не оновлює стан миттєво.
Замість цього він:

- створює **об'єкт оновлення** (update),
- зберігає його в **чергу хуків** (усередині `Fiber node` конкретного компонента).

У цьому update зберігається:

```javascript
{
  action: (prevState) => prevState + 1,
  nextState: undefined,
  lane: <пріоритет оновлення>
}
```

React додає цей update у чергу `updateQueue` компонента.

---

## 3. React позначає компонент як "такий, що потребує оновлення"

React ставить прапорець:

> "Компонент Counter змінився, потрібно перемалювати".

Але перемальовування не відбувається миттєво,
React чекає завершення поточної події або батча оновлень.

---

## 4. React **об'єднує (batching)** усі оновлення

Якщо в одній події декілька `setState()`:

```javascript
setCount(c => c + 1);
setCount(c => c + 1);
setCount(c => c + 1);
```

React **групує** їх в одну операцію,
щоб уникнути 3 зайвих перерендерів.

У підсумку виконається **один рендер**, а стан збільшиться на 3.

---

## 5. React **запускає фазу рендерингу**

Коли настав час перемалювати компонент:

1. React викликає **функцію компонента заново** (`Counter()`).
2. При цьому він **відновлює всі хуки** (`useState`, `useEffect` тощо) з попереднього Fiber.
3. Для кожного `useState` React дістає:
  - попереднє значення `state`,
  - чергу оновлень,
  - і обчислює новий стан, застосовуючи всі оновлення по порядку.

Тобто він робить щось на кшталт:

```javascript
let newState = oldState;
for (update of queue) {
  newState = update.action(newState);
}
```

---

## 6. React **створює нове віртуальне дерево (Virtual DOM)**

Після перерахунку стану:

- Компонент повертає новий JSX.
- React створює нове **віртуальне DOM-дерево (VDOM)**.
- Порівнює його з попереднім деревом (diffing).

---

## 7. React виконує **reconciliation (узгодження)**

React порівнює старе й нове дерево:

- якщо елемент не змінився, **перевикористовує** його,
- якщо змінився, **створює / оновлює / видаляє** потрібні вузли.

Цей процес оптимізований за допомогою **ключів (**`key`**)**, типів елементів і Fiber-структур.

---

## 8. React **вносить реальні зміни в DOM**

Після порівняння React виконує **"commit phase"**:

- оновлює реальні DOM-елементи (через `document` API),
- викликає хуки `useEffect`, `componentDidUpdate` тощо.

Тепер користувач бачить нове значення на екрані,
`count` оновився.

---

## 9. React очищає чергу оновлень

Після застосування змін React:

- очищає чергу `updateQueue`,
- зберігає новий стан як поточний,
- чекає наступних `setState()`.

---

## Підсумкова схема

```javascript
setState()
   ↓
Створення update-об'єкта
   ↓
Додавання в чергу Fiber'а
   ↓
Компонент позначається для оновлення
   ↓
Batching (об'єднання оновлень)
   ↓
Новий рендер → перерахунок нового state
   ↓
Створення нового Virtual DOM
   ↓
Порівняння (diff)
   ↓
Оновлення реального DOM
   ↓
Запуск useEffect / lifecycle-хуків
```

---

## Підсумок коротко

| Етап | Що робить React |
|---|---|
| setState | Створює update-запит |
| Queue | Кладе в чергу оновлень |
| Batching | Об'єднує декілька setState |
| Render | Викликає компонент заново |
| Diff | Порівнює Virtual DOM |
| Commit | Змінює реальні DOM-елементи |
| Effects | Викликає ефекти й оновлює хуки |

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

Для рев’юера

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

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