Как useEffect заменяет методы жизненного цикла и что означает пустой массив зависимостей?

Роль useEffect в жизненном цикле React-компонентов

• В функциональных компонентах useEffect используется как хук для сайд-эффектов
• с его помощью через зависимости заменяются классовые методы: componentDidMount, componentDidUpdate, componentWillUnmount
• callback эффекта запускается после рендера компонента
• если передан пустой массив зависимостей, эффект срабатывает только 1 раз после первого рендера (аналог componentDidMount)
• из эффекта можно вернуть функцию, отвечающую за очистку эффектов (аналог componentWillUnmount)
• массив зависимостей определяет, при каких изменениях выполнять эффект повторно (componentDidUpdate)
• Таким образом, useEffect объединяет логику жизненного цикла и делает управление ею проще

Если потребуется, могу составить короткий шаблон ответа для собеседования.

Подробный ответ

Основной ответ

В React хук useEffect предназначен для управления побочными эффектами в функциональных компонентах. Он заменяет традиционные методы жизненного цикла классов, включая componentDidMount, componentDidUpdate и componentWillUnmount. Эффект выполняет код после рендера, а при необходимости также предоставляет механизм очистки. Если массив зависимостей пуст [ ], callback сработает один раз после первоначального монтирования, то есть аналогично componentDidMount.

Основные моменты

• Замена методов жизненного цикла: callback внутри useEffect объединяет поведение componentDidMount (эффект после монтирования), componentDidUpdate (повторный запуск при изменении зависимостей) и componentWillUnmount (функция, возвращаемая для очистки).
• Пустой массив зависимостей: эффект запускается лишь один раз — после первого рендера. Такой вариант удобен для первоначальной инициализации, например загрузки данных или создания подписок.
• Очистка эффекта: возвращаемая useEffect функция выполняется перед следующим запуском эффекта либо во время размонтирования компонента. Это помогает корректно освобождать подписки и таймеры.

Практическое применение

В React 18 и более новых версиях рекомендуется указывать в useEffect точные зависимости, чтобы оптимизировать рендеры. Например, запрос данных в useEffect(() => { fetchData(); }, []) обеспечивает однократный вызов fetchData. По сравнению с классическими методами такой подход упрощает сопровождение и делает код понятнее.