Порядок рендерингу компонентів та виклику хуків у React

У React важливо розуміти порядок рендерингу компонентів та виклику хуків, особливо при оптимізації продуктивності та налагодженні поведінки компонентів.

---

#Порядок рендерингу компонентів

Коли React починає рендеринг, він дотримується цього порядку:

#1. Виклик батьківського компонент

React викликає функцію батьківського компонент, щоб отримати його JSX.

#2. Рекурсивний рендеринг дочірніх компонентів

У батьківському JSX React знаходить всі вкладені компоненти і викликає їх по одному.

#3. Побудова віртуального DOM

На основі всіх JSX виразів будує віртуальне дерево компонентів.4

#4. Порівняння (diffing) та оновлення DOM

React порівнює нове дерево з попереднім і оновлює лише змінені частини.

---

#Порядок виклику хуків

Хуки в React викликаються в строго визначеному порядку, щоб React міг зіставити значення хуків з їх попередніми значеннями під час повторних рендерів.

#Порядок

1. useState, useReducer, useContext та інші синхронні хуки

• Викликаються негайно під час рендерингу компонент, в порядку, в якому вони оголошені у функції.
• React зберігає значення хуків за їх порядком у "внутрішньому списку".

2. useLayoutEffect

• Виконується після оновлення DOM, але перед тим, як браузер відобразить зміни.
• Корисний, якщо потрібно виміряти розміри DOM або синхронно взаємодіяти з макетом.

3. useEffect

• Викликається після того, як браузер відрендерив сторінку.
• Використовується для побічних ефектів, підписок, запитів, таймерів тощо.

---

#❗ Важливо: не порушуйте порядок виклику хуків

React покладається на фіксований порядок виклику хуків між рендерами. Тому:

Не можна викликати хуки всередині:

• Умов if
• Циклів for, while
• Вкладених функцій

Потрібно викликати хуки завжди на верхньому рівні функції компонент.

Виклик компонент

Виклики хуків: useState, useRef, useContext

Формування JSX

Порівняння з попереднім віртуальним деревом

Оновлення DOM

Виклик useLayoutEffect

Рендеринг браузером

Виклик useEffect

#Резюме

• React спочатку викликає батьківські компоненти, а потім рендерить дітей.
• Хуки викликаються в порядку, в якому вони написані в тілі функції.
• useState та useEffect — це не просто функції, а механізм управління життєвим циклом.
• useLayoutEffect — синхронний, useEffect — асинхронний (відносно рендеру).

Важливо:

Порушення порядку виклику хуків призведе до помилки виконання та некоректної роботи компонент.