Если один из элементов массива зависимостей useEffect пустой, что произойдёт с эффектом?

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

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

Когда массив пуст ([]), это означает, что эффект не имеет зависимостей и должен выполняться только один раз после монтирования компонента. Это аналог жизненного цикла componentDidMount в классовых компонентах. После первого выполнения эффект не будет повторяться, даже если компонент перерендеривается.

Если в массиве есть пустой элемент, например [undefined] или [null], это не делает массив пустым. React будет сравнивать этот элемент с предыдущим значением. Если значение не меняется между рендерами (например, всегда undefined), эффект не будет перезапускаться. Однако если значение меняется (например, переменная, которая иногда равна undefined, а иногда нет), эффект будет выполняться при каждом изменении.

Практический пример

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  // Пустой массив: выполнится только один раз
  useEffect(() => {
    console.log('Монтирование');
  }, []);

  // Зависимость с пустым значением (undefined)
  useEffect(() => {
    console.log('Эффект с undefined');
  }, [flag]); // flag меняется, эффект перезапускается

  return (
    <div>
      <p>Счётчик: {count}</p>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
      <button onClick={() => setFlag(!flag)}>Переключить флаг</button>
    </div>
  );
}

В этом примере первый эффект с пустым массивом выведет сообщение только один раз при монтировании. Второй эффект зависит от flag, поэтому он будет выполняться при каждом изменении flag, даже если flag становится undefined или null.

Частые ошибки

• Забыть указать массив зависимостей — эффект будет выполняться после каждого рендера, что может вызвать проблемы с производительностью.
• Использовать пустой массив, когда эффект зависит от пропсов или состояния — эффект не будет обновляться при изменениях.
• Включать в массив объекты или массивы, которые создаются заново при каждом рендере, что приводит к бесконечному циклу.

Вывод

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