> Как убрать лишние зависимости в useEffect для избежания лишних рендеров (React)

Короткий ответ

Чтобы убрать лишние зависимости в useEffect, нужно пересмотреть логику эффекта: вынести вычисления из эффекта, использовать ref для мутабельных значений, передавать функции через useCallback с правильными зависимостями, а также применять useReducer или setState с функцией-апдейтером. Главное - не удалять зависимости "вслепую", а понять, какие данные действительно нужны эффекту для работы.

Подробное объяснение

Лишние зависимости в useEffect возникают, когда в массиве зависимостей указаны значения, которые меняются, но не влияют на логику эффекта. Это приводит к лишним вызовам эффекта и потенциальным ререндерам. Основные причины:

1. Объекты и массивы, создаваемые при каждом рендере - они имеют новый reference, даже если содержимое не изменилось. Решение: мемоизировать через useMemo или вынести за пределы компонента.

2. Функции, объявленные внутри компонента - каждая функция создаётся заново. Решение: обернуть в useCallback с правильными зависимостями или вынести из компонента.

3. Значения, которые используются только для чтения, но не влияют на выполнение эффекта - например, если эффект подписывается на событие и использует значение только при старте. Решение: использовать ref для хранения актуального значения.

4. Зависимости, которые можно вычислить из других зависимостей - если одно значение выводится из другого, можно оставить только базовое.

5. Стейт, который обновляется внутри эффекта - если эффект обновляет стейт, а этот стейт указан в зависимостях, возникает бесконечный цикл. Решение: использовать функциональную форму setState или useReducer.

На практике

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

Популярный паттерн - использование useRef для "запоминания" актуального значения без добавления его в зависимости:

JAVASCRIPT
const valueRef = useRef(value);
valueRef.current = value;

useEffect(() => {
  const handler = () => console.log(valueRef.current);
  window.addEventListener('scroll', handler);
  return () => window.removeEventListener('scroll', handler);
}, []); // value не в зависимостях

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

Пример кода

JAVASCRIPT
// Плохо: объект создаётся каждый рендер
function Component({ items }) {
  useEffect(() => {
    fetch('/api', { body: JSON.stringify(items) });
  }, [items]); // items - объект, будет вызывать эффект при каждом рендере
}

// Хорошо: мемоизация
function Component({ items }) {
  const stableItems = useMemo(() => items, [items.length]); // или другая стабильная зависимость
  useEffect(() => {
    fetch('/api', { body: JSON.stringify(stableItems) });
  }, [stableItems]);
}

// Плохо: функция в зависимостях
function Component({ onEvent }) {
  useEffect(() => {
    window.addEventListener('click', onEvent);
    return () => window.removeEventListener('click', onEvent);
  }, [onEvent]); // onEvent меняется при каждом рендере
}

// Хорошо: useCallback на родителе или ref
function Component({ onEvent }) {
  const onEventRef = useRef(onEvent);
  onEventRef.current = onEvent;

  useEffect(() => {
    const handler = (e) => onEventRef.current(e);
    window.addEventListener('click', handler);
    return () => window.removeEventListener('click', handler);
  }, []); // стабильно
}

Как отвечать на собеседовании

Начни с главной идеи: лишние зависимости - это те, которые не влияют на результат эффекта, но вызывают его перезапуск. Объясни, что удалять зависимости нужно осознанно, а не просто убирать из массива. Приведи конкретные техники: useRef для значений, useCallback для функций, useMemo для объектов, функциональный setState. Подчеркни, что важно понимать lifecycle эффекта и что именно должно вызывать его повторный запуск. Хорошо упомянуть правило: "эффект должен зависеть только от того, что он реально использует".

Что проверяет интервьюер

Интервьюер проверяет понимание механизма зависимостей в React, умение анализировать, какие данные действительно нужны эффекту, и знание инструментов для оптимизации (useRef, useCallback, useMemo). Также важно показать, что кандидат понимает разницу между reference и value, и как объекты/функции влияют на зависимости. Оценивается способность избегать антипаттернов и писать предсказуемый код.

Типичные ошибки

1. Удаление зависимостей без анализа - просто убрать из массива, чтобы эффект не перезапускался, но при этом эффект использует это значение. Это приводит к stale closure.
2. Игнорирование правил линтера - отключение eslint-plugin-react-hooks без понимания причины.
3. Использование useRef для всего подряд - когда значение действительно должно вызывать перезапуск эффекта.
4. Создание объектов/функций внутри компонента без мемоизации - даже если они не в зависимостях, они могут быть переданы в дочерние компоненты.
5. Забывание cleanup - при изменении зависимостей старый эффект должен корректно очищаться.