Какие переменные вызывают срабатывание UseEffect?

От каких переменных зависит срабатывание useEffect?

UseEffect — это один из фундаментальных хуков в React, предназначенный для выполнения побочных эффектов в функциональных компонентах. Его срабатывание напрямую зависит от массива зависимостей (dependency array), который передаётся вторым аргументом. Поведение хука варьируется в зависимости от содержимого этого массива.

Давайте подробно разберём три основных сценария.

1. Пустой массив зависимостей []

Если передать пустой массив, эффект выполнится только один раз — после первого рендера компонента (аналог componentDidMount в классах). Это идеально для операций, не требующих подписок на изменения данных (например, начальный fetch-запрос или ручное управление DOM-элементом).

useEffect(() => {
  console.log('Эффект выполнился один раз при монтировании');
  // Загрузка данных при инициализации
  fetchInitialData();

  // Функция очистки выполнится при размонтировании
  return () => {
    console.log('Очистка при размонтировании');
  };
}, []); // Пустой массив зависимостей

2. Массив с указанными зависимостями [dep1, dep2, ...]

Эффект будет выполняться после каждого рендера, при котором изменилось значение хотя бы одной из переменных, перечисленных в массиве. Это основное и наиболее частое использование, позволяющее синхронизировать побочный эффект с определёнными данными (аналог componentDidUpdate с проверкой конкретных пропсов/состояния).

const [count, setCount] = useState(0);
const [query, setQuery] = useState('');

useEffect(() => {
  // Этот эффект сработает при первом рендере и каждый раз, когда изменится `query`.
  // Изменение `count` не вызовет срабатывание.
  console.log(`Выполняется поиск по запросу: ${query}`);
  performSearch(query);
}, [query]); // Массив зависимостей содержит только `query`

Критически важные моменты:

• React использует поверхностное сравнение (shallow comparison) для определения изменений зависимостей.
• В массив должны попадать все переменные из области видимости компонента (пропсы, состояние, контекст, другие значения, рассчитанные на их основе), которые используются внутри эффекта. Игнорирование этого правила — частая причина ошибок.

3. Отсутствие массива зависимостей

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

useEffect(() => {
  // Выполняется после КАЖДОГО рендера (и монтирования, и обновления)
  console.log('Компонент отрисован или обновлён');
});

Какие переменные следует включать в массив зависимостей?

В массив включаются все реактивные значения, которые читаются внутри эффекта:

• Состояние (state), созданное с помощью useState, useReducer.
• Пропсы (props), переданные в компонент.
• Значения из контекста (context), полученные через useContext.
• Другие переменные, объявленные внутри компонента (например, результаты вычислений на основе состояния или пропсов).
• Функции, объявленные внутри компонента, которые используются в эффекте. Если функция является зависимостью, её следует либо обернуть в useCallback, чтобы сохранить стабильную ссылку, либо объявить внутри самого эффекта, если это возможно.

Пример с функцией как зависимостью:

const [data, setData] = useState(null);
const userId = 5;

const fetchData = useCallback(async () => {
  const result = await api.fetchUserData(userId);
  setData(result);
}, [userId]); // `fetchData` стабильна, пока не изменится `userId`

useEffect(() => {
  fetchData();
}, [fetchData]); // Теперь эффект зависит от стабильной функции

Основные выводы и best practices

• Всегда явно указывайте массив зависимостей. Это делает логику компонента предсказуемой и предотвращает скрытые баги.
• Для поиска пропущенных зависимостей используйте официальное правило для линтера eslint-plugin-react-hooks. Он автоматически анализирует код и предупреждает об ошибках.
• Функции очистки (cleanup) — неотъемлемая часть useEffect. Они выполняются перед повторным срабатыванием эффекта или при размонтировании компонента и служат для отмены подписок, таймеров или сетевых запросов, предотвращая утечки памяти.
• Помните о стабильности ссылок. Если зависимость (например, объект или функция) создаётся заново при каждом рендере, это приведёт к ненужным повторным выполнениям эффекта. Используйте useMemo для объектов/массивов и useCallback для функций, чтобы этого избежать.

Таким образом, useEffect срабатывает в зависимости от переданного массива, реагируя на изменения именно тех переменных, которые в нём указаны. Правильное управление этим массивом — ключ к написанию эффективных, надёжных и свободных от багов React-компонентов.