Что если передать пустой массив в 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), а замкнутые значения остаются с первого рендера — отсюда функциональные сеттеры или честные зависимости.