Розкажіть про базовий принцип роботи React Hooks.

Повне пояснення

Що це і навіщо

React Hook – це API, що дозволяє функціональним компонентам мати state, обробляти побічні ефекти та інші можливості класових компонентів. Це зменшує потребу у класах і полегшує реюзабельність логіки.

Ключові принципи

• Функція: Hook – це звичайна функція, що починається з use.
• Порядок викликів: Hook мають бути викликані у верхньому рівні компоненту, не всередині умов чи циклів.
• State‑світ: React зберігає внутрішнє значення Hook між рендерингами.
• Повторний рендер: Оновлення state через setState (наприклад, useState) викликає повторний рендер.

Як це працює

1. Під час першого рендеру React створює внутрішню структуру для кожного Hook.
2. При наступних рендерах React ідентифікує Hook за їх порядком виклику.
3. Якщо значення state змінюється, React планує новий рендер.

Практика і реалізація

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return <button onClick={() => setCount(c => c + 1)}>Increment</button>;
}

Тестування

• Unit: jest + @testing-library/react-hooks для перевірки state.
• Integration: react-testing-library + user-event для симуляції кліків.

Безпека та оптимізація

• Використовуйте useCallback/useMemo, щоб уникнути зайвих рендерів.
• Переконайтеся, що Hook не викликаються умовно – це запобігає помилкам типу "React Hook has been called in a different order".

Особливості в контексті React

• Custom Hooks: дозволяють інкапсулювати логіку і повторно використовувати її.
• React 18: підтримка useSyncExternalStore для синхронного читання зовнішніх станів.

Типові помилки

1. Виклик Hook у циклі → "React Hook has been called in a different order".
2. Використання this у функціональному компоненті → не підтримується.
3. Зміна порядку Hook між рендерами → непередбачувана поведінка.
4. Необхідність useEffect без залежностей → нескінченний цикл рендеру.
5. Відсутність key у списку → React не може правильно відстежувати елементи.
6. Перевантаження state у великому компоненті → погана продуктивність.
7. Використання useState з об'єктом без копіювання → мутування стану.
8. Необхідність useRef для DOM‑елементів → неправильне оновлення.

Cheatsheet

• useState(initial) – state + setter.
• useEffect(fn, deps?) – побічний ефект.
• useContext(ctx) – доступ до контексту.
• useReducer(reducer, init) – складний state.
• useRef(initial?) – мутоване значення, не викликає рендер.
• useMemo(fn, deps) – мемоізація значення.
• useCallback(fn, deps) – мемоізація функції.