Какие зависимости нужно указывать в useCallback?

Что такое useCallback и зачем нужны зависимости

useCallback — это хук React, который возвращает мемоизированную версию колбэка. Он предотвращает создание новой функции при каждом рендере, если зависимости не изменились. Массив зависимостей — второй аргумент хука — определяет, когда колбэк должен быть пересоздан.

Какие зависимости указывать

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

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

function Counter() {
  const [count, setCount] = useState(0);
  const [step, setStep] = useState(1);

  // Правильно: step указан в зависимостях
  const increment = useCallback(() => {
    setCount(prev => prev + step);
  }, [step]);

  // Неправильно: step не указан, будет использоваться старое значение
  const badIncrement = useCallback(() => {
    setCount(prev => prev + step);
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

Правила и рекомендации

• Всегда указывайте все переменные, используемые внутри колбэка
• Если колбэк использует только функции-сеттеры из useState, зависимости можно опустить, так как они стабильны
• Используйте eslint-plugin-react-hooks для автоматической проверки зависимостей
• Не указывайте в зависимостях функции, которые сами мемоизированы через useCallback или useMemo

Вывод

Правильное указание зависимостей в useCallback критически важно для корректной работы приложения. Ошибки в зависимостях приводят к багам с устаревшими данными и неожиданным поведением. Всегда следуйте правилу: указывайте все переменные из внешнего скоупа, которые использует колбэк, и используйте линтер для автоматической проверки.