Хуки 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, События