Что такое React Hooks?

Как это устроено

Hooks — API React, позволяющее функциональным компонентам использовать состояние, эффекты, контекст и другую логику без классов. Появились в React 16.8 и стали основным стилем написания компонентов.

Базовый набор: useState, useEffect, useContext, useRef, useMemo, useCallback, useReducer, плюс более узкие вроде useId, useTransition.

function Profile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    let cancelled = false;
    fetch(`/api/users/${userId}`)
      .then(r => r.json())
      .then(data => {
        if (!cancelled) setUser(data);
      });
    return () => {
      cancelled = true;
    };
  }, [userId]);

  return user ? <p>{user.name}</p> : <p>Загрузка…</p>;
}

Правила hooks (обязательны, иначе порядок вызовов сломается):

1. Вызывать только на верхнем уровне — не в циклах, условиях и вложенных функциях.
2. Вызывать только из React-функций или custom hooks.

Зачем нужны: меньше boilerplate классов; проще переиспользовать логику через custom hooks; единый стиль компонентов. Hooks не «магия» — React хранит состояние в fiber и сопоставляет вызовы по порядку на каждом рендере.

На middle-уровне полезно связать hooks с правилами зависимостей useEffect и с тем, почему ESLint-плагин exhaustive-deps важен.

Итог

Hooks подключают state и побочные эффекты к функциям; соблюдайте правила порядка вызовов.