Що робить React під час оновлення стану?

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

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 запускає фазу рендерингу

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

React викликає функцію компонента заново (Counter()).
При цьому він відновлює всі хуки (useState, useEffect тощо) з попереднього Fiber.
Для кожного 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	Викликає ефекти й оновлює хуки

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

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

Premium

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