Хуки React: useState, useEffect та інші – зрозуміле пояснення

Коротко: Хуки — функції, за допомогою яких компоненти React використовують стан і побічні ефекти; useState зберігає значення, useEffect виконується після відображення, користувацькі хуки об’єднують логіку.

Докладніше: У React компоненти — функції, які описують інтерфейс. З хуками (з React 16.8) вони отримують пам’ять і реакції на події без класів. Правила: викликайте хуки на верхньому рівні компонента і лише в компонентах чи користувацьких хуках.

Подробиці

useState: стан

function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>Clicked: {n}</button>;
}

Коли стан змінюється через setN, React заново відображає компонент. Ніколи не змінюйте стан напряму (n++, list.push), замість цього задавайте нові значення (setList([...list, x])). Якщо залежите від старого значення: setN(v => v + 1).

useEffect: побічні ефекти

useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id); // очищення
}, [tick]); // залежності

Для речей поза React: завантаження даних, таймери, слухачі подій, заголовок документа. Масив залежностей вирішує, коли ефект виконається знову ([] = один раз після першого відображення). Функція очищення запобігає витокам. Уникайте ефектів там, де достатньо обчислення під час відображення; дані краще завантажувати через серверні компоненти, TanStack Query чи SWR.

Інші важливі хуки

• useRef: змінюване значення/доступ до DOM без перемальовування.
• useMemo / useCallback: кешують результати/функції (лише за реальних проблем із продуктивністю).
• useContext: значення без передавання через усі рівні.
• useReducer: складний стан з діями.
• useTransition / useDeferredValue: зберігають плавність вводу.
• Користувацькі хуки (useOnline(), useLocalStorage()) об’єднують логіку багаторазового використання.

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

• Нескінченний цикл: встановлення стану в ефекті без відповідних залежностей.
• Застаріле замикання: забуті залежності; використовуйте правило ESLint react-hooks/exhaustive-deps.
• Похідний стан? Тоді обчислюйте, а не зберігайте.
• Піднімайте стан угору замість дублювання.
• Обирайте ключі у списках стабільно.

Практикуйтеся: невеликі проєкти (список справ, лічильник, фільтр пошуку) і офіційна документація на react.dev.

Див. також: React, Next.js App Router, TypeScript, Події