Правила хуків у React

Перед початком

Цю коротку статтю про хуки React почнемо з висновків 🎉🎉🎉

Висновки

1. Що таке хуки?
   Це API, які дають функціональним компонентам доступ до можливостей React.
2. Де зберігаються дані компонента?
   React пов’язує стан, властивості та інші службові дані з вузлом компонента в дереві Fiber.
3. Чому більшість хуків не можна викликати умовно?
   React покладається на порядок викликів, щоб зіставити хуки стану між рендерингами. Їхні записи пов’язані в список у структурі Fiber. Якщо додати або пропустити виклик, наступний хук може отримати дані іншого. Це порушує відповідність і зазвичай призводить до помилки React.

Що таке хуки?

Хуки дають функціональним компонентам доступ до можливостей React. Можна використовувати:

• вбудовані хуки: useState, useReducer, useRef, useContext тощо;
• власні хуки, які поєднують спільну логіку.

Де зберігаються дані?

Коротко: React зберігає стан і службові дані компонента у пов’язаних із ним структурах Fiber.

Докладніше:
Застосунок React складається з компонентів — незалежних частин коду, які можна використовувати повторно. React будує дерево робочих вузлів, яке називають деревом Fiber.

Дерево Fiber дає змогу відстежувати компоненти між рендерингами. Воно складається з вузлів FiberNode.

Вузол FiberNode містить дані, потрібні React для роботи з компонентом: його властивості, стан, зв’язки з іншими вузлами тощо. Коли компонент уперше викликає кілька useState, React створює відповідні записи в порядку викликів.
Розгляньмо невеликий приклад:

function App() {
    const [count, setCount] = useState<number>(0);
    const [name, setName] = useState<string>("John");

    return (
        <div className="card">
            <button onClick={() => setCount((c) => ++c)}>
                Count is {count}
            </button>
            <hr />
            <input value={name} onChange={(e) => setName(e.target.value)} />
        </div>
    );
}

export default App;

Тут є дві частини стану з початковими значеннями count = 0 і name = "John". Погляньмо, як вони представлені в FiberNode: Порядок записів відповідає порядку викликів у компоненті. Від першого запису можна перейти до наступного: FiberNode -> memoizedState -> next ->.

Під час наступного рендерингу React знову викликає компонент і повертає значення, збережені для відповідних хуків.
Перший useState читає перший запис списку, а другий — другий запис, доступний через .next першого.
Якщо наступного разу додати або пропустити хук, порядок зміниться. Тоді React не зможе правильно зіставити виклики зі збереженими даними: один хук опиниться на позиції іншого.

Чому хуки не можна викликати умовно?

React має зіставляти дані між рендерингами. Для хуків стану критично важливий стабільний порядок викликів. Саме тому їх не можна довільно додавати або пропускати залежно від умови.

Які завдання розв’язує Fiber?

Fiber дає React структуру для планування й виконання роботи з деревом компонентів:

• Оновлення можуть мати різні пріоритети.
• Рендеринг розбивається на одиниці роботи. Це не означає, що окремі довільні частини DOM фіксуються в будь-який момент: фаза commit має власні правила.
• React може призупиняти, продовжувати або перезапускати роботу рендерингу.

Правила хуків

🔴 Не викликайте хуки всередині умов або циклів.
🔴 Не розміщуйте їх після умовного return.
🔴 Не викликайте їх в обробниках подій.

Виняток у сучасному React: API use можна викликати умовно й у циклах. Його правила відрізняються від правил useState та більшості інших хуків; не переносьте цей виняток на них.