Что будет, если массив зависимостей пустой?

Ответ на вопрос о пустом массиве зависимостей в хуках React

Когда в React-хуках, таких как useEffect, useCallback, useMemo или useImperativeHandle, передаётся пустой массив зависимостей [], это означает, что эффект или мемоизированное значение выполнится только один раз — при монтировании компонента и не будет зависеть от каких-либо изменений в пропсах или состоянии.

Поведение на примере useEffect

Рассмотрим наглядный пример с useEffect:

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

function ExampleComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Эффект выполнился только при монтировании');
    // Типичное использование: загрузка данных при старте
    // fetch('/api/data').then(...);
  }, []); // <- Пустой массив зависимостей

  return (
    <div>
      <p>Счётчик: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Увеличить счётчик
      </button>
    </div>
  );
}

В этом примере:

• Сообщение в консоли появится только один раз при первом рендере компонента.
• Последующие клики по кнопке, изменяющие состояние count, НЕ приведут к повторному выполнению эффекта.
• Функция очистки (если она есть) выполнится только при размонтировании компонента.

Ключевые последствия и сценарии использования

✅ Преимущества и типичные случаи применения:

• Инициализация и монтирование: Идеально для операций, которые должны выполняться один раз при старте — загрузка начальных данных, настройка подписок, инициализация сторонних библиотек.
• Предотвращение лишних запусков: Гарантирует, что ресурсоёмкие операции (сетевые запросы, сложные вычисления) не будут повторяться без необходимости.
• Строгий контроль над жизненным циклом: Чёткое разделение логики на "только при монтировании" и "при обновлении".

⚠️ Риски и частые ошибки:

• Захват устаревших значений (Stale Closure): Самый распространённый подводный камень. Эффект, созданный с [], "замораживает" (captures) значения переменных из области видимости на момент первого рендера.

  useEffect(() => {
    // `count` здесь всегда будет равен 0, даже после обновлений состояния!
    console.log('Захваченное значение count:', count);
    const intervalId = setInterval(() => {
      console.log('В интервале count всё ещё:', count); // Всегда 0
    }, 1000);
    return () => clearInterval(intervalId);
  }, []);
  

• Утечки памяти и логические ошибки: Если в эффекте устанавливается подписка (event listener, WebSocket, интервал), но очистка не предусмотрена, это приведёт к утечке памяти при размонтировании компонента.

• Неадекватное поведение при изменении требований: Часто пустой массив используют "для тишины в консоли" (чтобы отключить предупреждение линтера о зависимостях), не учитывая реальную логику зависимости кода от пропсов или состояния. Это антипаттерн, который маскирует потенциальные баги.

Сравнение с другими вариантами массива зависимостей

// 1. Нет массива зависимостей (вообще) - эффект выполняется после КАЖДОГО рендера
useEffect(() => { console.log('Без массива: рендер №', renderCount); });

// 2. Пустой массив [] - эффект выполняется ТОЛЬКО при монтаже/размонтировании
useEffect(() => { console.log('С []: только при монтировании'); }, []);

// 3. Массив с зависимостями [dep1, dep2] - эффект выполняется при изменении dep1 или dep2
useEffect(() => { console.log('С зависимостями: count изменился'); }, [count]);

Рекомендации и лучшие практики

1. Всегда добавляйте функции очистки для отписок, таймеров и асинхронных операций при использовании [].
2. Используйте линтер eslint-plugin-react-hooks с правилом exhaustive-deps. Он предупредит о потенциально пропущенных зависимостях. Если вы сознательно используете [], вы будете делать это обдуманно.
3. Для работы с устаревшими замыканиями используйте рефы (например, с помощью useRef) или, в случае useCallback/useMemo, убедитесь, что вложенные функции не требуют актуальных значений на каждом рендере.
4. Чётко задавайте вопрос: "Действительно ли эта операция должна выполняться единожды за всё время жизни компонента?" Если ответ "да" — [] уместен. Если логика зависит от изменяемых данных — перечислите их в массиве.

Итог: Пустой массив зависимостей — мощный инструмент для оптимизации и управления жизненным циклом, но он требует осознанного применения. Его основное назначение — эмуляция поведения componentDidMount и componentWillUnmount в классовых компонентах, но с учётом специфики функциональных компонентов и замыканий.