useEffect

Хук useEffect — это встроенный React-хук, позволяющий функциональным компонентам выполнять побочные эффекты — такие как загрузка данных, манипуляции с DOM, подписки и таймеры — после рендеринга компонента. useEffect принимает функцию-установщик и необязательный массив зависимостей: React запускает функцию-установщик после каждого рендера, в котором изменилась хотя бы одна из перечисленных зависимостей, после каждого рендера при отсутствии массива или только один раз при монтировании при передаче пустого массива. Когда функция-установщик возвращает функцию очистки, React вызывает её перед повторным запуском эффекта или при размонтировании компонента, предотвращая утечки памяти из подписок или слушателей событий. Хук useEffect заменил методы жизненного цикла componentDidMount, componentDidUpdate и componentWillUnmount из React-компонентов на основе классов, объединив всю логику побочных эффектов в единый декларативный API. Понимание useEffect — и в особенности массива зависимостей — критически важно для каждого React-разработчика, поскольку неправильное использование является одним из наиболее распространённых источников багов: устаревших замыканий и бесконечных циклов рендеринга в фронтенд-приложениях.

Как это работает

useEffect строится на useState для локального состояния компонента и useEffect для сайд-эффектов (мутации DOM, подписки, сеть). useState(initial) возвращает [value, setValue]; вызов setValue(next) планирует ререндер. useEffect(fn, deps) запускает fn после рендера при изменении любого элемента deps; возврат функции из fn регистрирует cleanup. Хуки должны вызываться в одном и том же порядке каждый рендер — никогда внутри if или циклов.

Когда применять

useState — для состояния одного компонента (toggle, поля формы, hover). Поднимайте state к ближайшему общему предку, когда двум компонентам нужно его делить. useEffect — для сайд-эффектов (подписки, синк, фетч), не для производных значений (считайте их inline) или трансформации props (делайте на рендере). Пустой deps=[] запускает один раз на mount; пропущенные deps — эффект на каждый рендер (почти всегда ошибка).

Типичные ошибки

Ловушки useEffect: stale closures (setCount(count + 1) ловит count этого рендера — используйте setCount(c => c + 1)); пропущенные deps и эффекты на каждый рендер; чрезмерный useEffect для того, что React делает сам (computed values, зеркалирование props); неверный cleanup (подписка осталась = утечка памяти при unmount). Прочтите гайд "You Might Not Need an Effect" — он убирает половину useEffect в реальных кодовых базах.

Связанные понятия

• State и хуки
• useState
• Очистка эффекта
• Массив зависимостей