> Какие хуки существуют кроме useState и useEffect (React)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Консорциум кодекс

Стек: React

> Пример ответа

Короткий ответ

Помимо useState и useEffect, в React существует множество встроенных хуков: useContext для доступа к контексту, useReducer для сложной логики состояния, useCallback и useMemo для мемоизации, useRef для ссылок на DOM и изменяемых значений, useImperativeHandle для кастомного ref, useLayoutEffect для синхронных side-эффектов, useDebugValue для отладки кастомных хуков, а также useId для генерации уникальных идентификаторов в SSR.

Подробное объяснение

React предоставляет 15 встроенных хуков (начиная с версии 18), каждый из которых решает определённую задачу. Их можно разделить на группы:

Хуки состояния:

useState - базовый хук для локального состояния
useReducer - альтернатива useState для сложной логики с редьюсером (как в Redux)
useContext - доступ к контексту без прокидывания пропсов

Хуки эффектов:

useEffect - side-эффекты после рендера
useLayoutEffect - синхронный эффект до отрисовки браузером (для измерений DOM, анимаций)

Хуки мемоизации:

useMemo - мемоизация вычисляемого значения
useCallback - мемоизация функции (по сути, useMemo для функций)

Хуки ссылок:

useRef - mutable ref для DOM-элементов и хранения значений без ререндера
useImperativeHandle - кастомизация ref, передаваемого через forwardRef

Хуки для работы с DOM:

useId - генерация уникальных ID (важно для SSR и accessibility)
useDeferredValue - отложенное обновление части UI (React 18)
useTransition - пометка обновления как низкоприоритетного (React 18)

Хуки для отладки:

useDebugValue - отображение метки для кастомных хуков в React DevTools

Хуки для синхронного рендера (React 18):

useSyncExternalStore - для внешних хранилищ (библиотеки стейт-менеджмента)

На практике

Для senior-разработчика важно понимать trade-off между хуками:

useReducer vs useState: useReducer предпочтительнее, когда состояние зависит от предыдущего, или когда логика обновления сложная (много полей). Для простых флагов - useState.
useMemo vs useCallback: useMemo для значений, useCallback для функций. Не мемоизируйте всё подряд - измеряйте производительность.
useEffect vs useLayoutEffect: 99% случаев - useEffect. useLayoutEffect нужен только когда нужно измерить DOM до того, как пользователь увидит изменения (например, позиционирование тултипа).
useRef vs useState: useRef не вызывает ререндер - используйте для значений, которые не влияют на UI (таймеры, предыдущие пропсы).
useId vs ручной ID: всегда используйте useId для accessibility и гидратации - ручные ID ломают SSR.

Пример кода

JSX
// Пример комбинации хуков для сложной формы
function UserForm({ initialData }) {
  const [state, dispatch] = useReducer(formReducer, initialData);
  const formRef = useRef(null);
  const id = useId();
  
  const handleSubmit = useCallback((e) => {
    e.preventDefault();
    dispatch({ type: 'SUBMIT' });
  }, []);

  const isDirty = useMemo(() => {
    return JSON.stringify(state) !== JSON.stringify(initialData);
  }, [state, initialData]);

  useLayoutEffect(() => {
    if (formRef.current) {
      formRef.current.scrollIntoView({ behavior: 'smooth' });
    }
  }, [state.errors]);

  return (
    <form ref={formRef} onSubmit={handleSubmit} aria-labelledby={id}>
      <h2 id={id}>User Form</h2>
      <input
        value={state.name}
        onChange={(e) => dispatch({ type: 'SET_NAME', payload: e.target.value })}
      />
      {isDirty && <button type="submit">Save</button>}
    </form>
  );
}

Как отвечать на собеседовании

Начните с перечисления всех хуков, затем сгруппируйте их по назначению. Покажите понимание не только синтаксиса, но и когда какой хук применять. Упомяните React 18 хуки (useTransition, useDeferredValue, useSyncExternalStore) - это показывает актуальность знаний. Приведите пример из реального проекта, где вы выбирали между хуками.