> Как правильно указывать зависимости в useEffect в React (React)

В useEffect вторым аргументом передаётся массив зависимостей. Правило простое: включите в него все переменные, функции или пропсы, которые используются внутри эффекта и могут измениться между рендерами. Если зависимость не указана, эффект будет использовать устаревшее значение (stale closure).

Пример:

JSX
useEffect(() => {
  fetch(`/api/users/${userId}`)
    .then(res => res.json())
    .then(setUser);
}, [userId]); // userId - зависимость

Основные рекомендации:

• Не включайте в массив стабильные ссылки (например, dispatch из Redux или функции, обёрнутые в useCallback с пустыми зависимостями).

• Если эффект использует пропсы или состояние, обязательно перечислите их.

• Для сложной логики используйте useReducer или выносите код в отдельные функции с useCallback.

• Пустой массив [] означает запуск только при монтировании (и размонтировании при возврате cleanup-функции).

Ошибки:

• Пропуск зависимостей (например, не указан userId в примере выше) - эффект не обновится при смене пользователя.

• Включение лишних зависимостей (например, функций, создаваемых на каждый рендер) - вызовет бесконечный ререндер.

Используйте ESLint с плагином react-hooks/exhaustive-deps - он автоматически подсветит проблемы с зависимостями.