Что происходит при изменении зависимостей в useEffect?

Хук useEffect в React позволяет выполнять побочные эффекты в функциональных компонентах. Ключевым элементом управления его поведением является массив зависимостей, который передаётся вторым аргументом.

Как работает сравнение зависимостей

React хранит значения зависимостей из предыдущего рендера. Перед каждым рендером (включая повторные) он выполняет поверхностное сравнение (Object.is) каждого элемента массива с его предыдущим значением. Если хотя бы одно значение изменилось, триггерится последовательность:

1. Выполняется функция очистки (cleanup) от предыдущего запуска эффекта, если она была возвращена.
2. Запускается тело самого эффекта (синхронная функция, переданная в useEffect) заново.

Практические примеры поведения

Рассмотрим компонент, который подписывается на данные по ID пользователя.

useEffect(() => {
  console.log('Эффект выполняется для userId:', userId);
  const subscription = subscribeToUserData(userId);

  // Функция очистки
  return () => {
    console.log('Очистка для предыдущего userId:', userId);
    unsubscribeFromUserData(userId);
  };
}, [userId]); // Зависимость: userId

При первом рендере с userId=1 эффект выполнится, подписка создастся. Если в следующем рендере userId останется 1, эффект не запустится повторно. Если userId изменится на 2, React сначала выполнит функцию очистки (отпишется от данных пользователя 1), а затем запустит эффект заново, подписавшись на данные пользователя 2.

Особые случаи массива зависимостей

• Пустой массив []: Эффект выполняется один раз после монтирования компонента, а очистка — при размонтировании. Аналог componentDidMount и componentWillUnmount.
• Отсутствие массива: Эффект выполняется после каждого рендера компонента. Это может привести к проблемам с производительностью.
• Объекты/массивы в зависимостях: Поскольку сравнение поверхностное, новый объект с тем же содержимым считается изменением. Это частая причина бесконечных циклов.

Вывод: Массив зависимостей в useEffect — это инструмент точного контроля над тем, когда должен выполняться побочный эффект. Его правильное использование предотвращает лишние вычисления, утечки памяти и обеспечивает актуальность данных в компоненте, синхронизируя эффекты с конкретными пропсами или состоянием.