Какие знаешь Hooks помимо useState и useEffect?

Развёрнутый ответ о дополнительных React Hooks

Помимо базовых useState и useEffect, React предоставляет богатый набор дополнительных хуков, которые можно разделить на несколько категорий. Вот основные из них, которые я использую в разработке:

1. Контекстные хуки

useContext — позволяет подписаться на контекст React без использования Consumer компонентов. Это основной способ работы с глобальным состоянием или темами без пропс-дриллинга.

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function ThemedComponent() {
  const theme = useContext(ThemeContext);
  return <div className={`app ${theme}`}>Текущая тема: {theme}</div>;
}

2. Референсы и DOM-операции

useRef — создаёт мутабельный объект, который сохраняет своё значение между рендерами. Используется для:

• Доступа к DOM-элементам
• Хранения мутабельных значений без триггера ререндера
• Сохранения предыдущих значений

import { useRef, useEffect } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} type="text" />;
}

3. Хуки для производительности

useMemo — мемоизирует результат вычислений, пересчитывая только при изменении зависимостей:

const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b);
}, [a, b]); // Пересчитывается только при изменении a или b

useCallback — мемоизирует колбэк-функции, предотвращая создание новых функций при каждом рендере:

const handleClick = useCallback(() => {
  console.log('Clicked!', itemId);
}, [itemId]); // Новая функция создаётся только при изменении itemId

useMemo и useCallback критически важны для оптимизации дочерних компонентов, обёрнутых в React.memo.

4. Хуки для редьюсеров

useReducer — альтернатива useState для сложной логики состояния:

import { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
    </>
  );
}

5. Сторонние и кастомные хуки

useLayoutEffect — похож на useEffect, но выполняется синхронно после всех DOM-мутаций, но до отрисовки браузером. Используется для измерений DOM и синхронных обновлений.

useLayoutEffect(() => {
  // Измеряем размер элемента
  const { width } = ref.current.getBoundingClientRect();
  setWidth(width);
}, []);

useDebugValue — помогает отлаживать кастомные хуки в React DevTools:

function useCustomHook(value) {
  const [state, setState] = useState(null);
  
  useDebugValue(state !== null ? 'Ready' : 'Loading');
  
  return [state, setState];
}

6. Дополнительные практические хуки

В реальных проектах также активно используются:

• Кастомные хуки — создаются разработчиками для переиспользования логики
• useId (React 18+) — генерация уникальных ID на клиенте и сервере
• useTransition (React 18+) — маркировка обновлений как неблокирующих
• useDeferredValue (React 18+) — отложенное обновление значения
• useSyncExternalStore (React 18+) — подписка на внешние хранилища

Ключевые моменты использования:

• Правило хуков: хуки можно вызывать только на верхнем уровне компонентов или других хуков
• Зависимости в useEffect: всегда указывайте корректный массив зависимостей
• Оптимизация: используйте useMemo и useCallback обдуманно, только при реальной необходимости
• Кастомные хуки: создавайте для повторяющейся логики (аутентификация, формы, API-запросы)

Эти хуки образуют мощный инструментарий для создания производительных, поддерживаемых React-приложений. Понимание когда и какой хук использовать — важный навык senior-разработчика. В React 18 появились дополнительные хуки для Concurrent Features, которые позволяют лучше управлять приоритетами рендеринга и улучшают пользовательский опыт в сложных интерфейсах.