Що таке хук у React?

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

Хук (hook) у React - це спеціальна функція, яка дозволяє «підключати» внутрішні можливості React (такі як стан, життєвий цикл, контекст тощо) у функціональних компонентах, без потреби використовувати класи.

Простими словами

Хуки дають функціональним компонентам «мізки» - дозволяють їм запам'ятовувати стан, реагувати на зміни, виконувати побічні ефекти та взаємодіяти з контекстом.

Приклад: useState

Хук useState додає стан у функціональний компонент.

javascript

import { useState } from "react";

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

Тут useState(0):

створює внутрішній стан count,
повертає пару [значення, функція для оновлення].

Приклад: useEffect

Хук useEffect використовується для побічних ефектів, наприклад, запитів до API, роботи з DOM або підписок.

javascript

import { useState, useEffect } from "react";

function User() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch("/api/user")
      .then(res => res.json())
      .then(setUser);
  }, []); // empty array -> runs once on mount

  return <div>{user ? user.name : "Loading..."}</div>;
}

Основні вбудовані хуки React

Хук	Призначення
useState	Додає стан у функціональний компонент
useEffect	Виконує побічні ефекти (запити, таймери, підписки)
useContext	Дозволяє використовувати контекст без Context.Consumer
useReducer	Керує станом через редʼюсер (альтернатива useState)
useMemo	Кешує обчислені значення
useCallback	Кешує функції
useRef	Створює «посилання» для зберігання значення між рендерами
useLayoutEffect	Аналог useEffect, але викликається до відмальовування
useImperativeHandle	Керує тим, що доступно батьківському компоненту через ref
useTransition, useDeferredValue	Керування відкладеними оновленнями (React 18+)

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

Хуки можна викликати лише на верхньому рівні компонента (не всередині if, for або вкладених функцій).
Хуки можна викликати лише всередині функціональних компонентів або власних хуків.

Навіщо React ввів хуки?

До хуків логіка станів і ефектів була доступна лише в класових компонентах. Хуки дозволили:

писати менше коду,
повторно використовувати логіку через кастомні хуки,
позбутися плутанини з this.

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

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

Premium

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

Що таке хук у React?

#Простими словами

#Приклад: useState

#Приклад: useEffect

#Основні вбудовані хуки React

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

#Навіщо React ввів хуки?