PassFront
  1. PassFront
  2. База знаний
  3. Хуки

Что если передать пустой массив в useEffect?

Хуки

Пустой массив зависимостей означает: эффект выполнится один раз после монтирования, а его cleanup — один раз при размонтировании. Это идиома «сделать при появлении компонента».

Поведение

useEffect(() => {
  console.log('mount');            // после первого рендера

  return () => console.log('unmount'); // при удалении из дерева
}, []);

Почему так: React перезапускает эффект, только если изменился хотя бы один элемент массива зависимостей. Элементов нет — сравнивать нечего — перезапусков не будет.

Типичные применения

  • Разовая загрузка данных при открытии страницы.
  • Установка глобальных слушателей/подписок с отпиской в cleanup.
  • Инициализация внешних библиотек (карта, чарт).
  • Аналитика: «страница показана».

Нюансы

StrictMode (React 18, только dev): mount → unmount → mount, то есть эффект выполнится дважды. Это намеренная проверка корректности cleanup; код должен быть к этому готов (отписки, отмена запросов).

Устаревшие значения: эффект с [] замыкает props/state первого рендера. Если внутри используется что-то реактивное, оно навсегда останется «как при монтировании»:

useEffect(() => {
  const t = setInterval(() => setCount(count + 1), 1000); // count всегда 0!
  return () => clearInterval(t);
}, []);
// правильно: setCount((c) => c + 1) — и зависимость не нужна

ESLint-правило exhaustive-deps предупреждает о таких пропусках — подавлять его стоит только осознанно.

Коротко для собеседования

useEffect(fn, []) — эффект один раз после монтирования, cleanup при размонтировании (аналог componentDidMount/WillUnmount). Ловушки: в StrictMode dev выполняется дважды (проверка cleanup), а замкнутые значения остаются с первого рендера — отсюда функциональные сеттеры или честные зависимости.

Другие вопросы раздела