Нужен ли useCallback только при передаче в props других компонентов

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

Нет, useCallback нужен не только для передачи в props других компонентов. Хотя это наиболее частая и критичная ситуация, есть и другие важные сценарии его применения.

Основная цель useCallback

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

Ключевые сценарии применения useCallback

1. Оптимизация дочерних компонентов, зависящих от сравнения ссылок

Это наиболее распространенный случай, но важно понять его глубину:

// Без useCallback - BadButton перерендеривается всегда
const BadComponent = () => {
  const handleClick = () => console.log('Clicked');
  
  return <BadButton onClick={handleClick} />;
};

// С useCallback - GoodButton перерендеривается только при изменении deps
const GoodComponent = () => {
  const handleClick = useCallback(() => {
    console.log('Clicked');
  }, []); // Зависимости пусты - функция создается один раз
  
  return <GoodButton onClick={handleClick} />;
};

Важное уточнение: useCallback сам по себе не предотвращает перерендер дочернего компонента. Он работает в связке с:

• React.memo для функциональных компонентов
• shouldComponentUpdate для классовых компонентов
• PureComponent для классовых компонентов

2. Зависимости в других хуках (useEffect, useMemo, useCallback)

Функции, используемые в зависимостях других хуков, должны быть стабильными:

const Component = ({ userId }) => {
  // Без useCallback - эффект будет срабатывать на каждом рендере
  const fetchUser = useCallback(async () => {
    const response = await fetch(`/api/users/${userId}`);
    return response.json();
  }, [userId]); // Зависимость от userId

  useEffect(() => {
    fetchUser();
  }, [fetchUser]); // Стабильная зависимость
  
  return <div>User Component</div>;
};

3. Стабильные ссылки для сторонних библиотек и нативных API

Некоторые API требуют стабильных функций:

const ResizableComponent = () => {
  const handleResize = useCallback(() => {
    console.log('Window resized');
  }, []);

  useEffect(() => {
    // resizeEventListener будет добавлять/удалять одну и ту же функцию
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, [handleResize]);

  return <div>Resizable Content</div>;
};

4. Контекст (Context) и глобальное состояние

При передаче функций через контекст:

const UserContext = React.createContext();

const UserProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  
  // Без useCallback все потребители контекста будут перерендериваться
  const login = useCallback((credentials) => {
    // Логика входа
  }, []);
  
  const logout = useCallback(() => {
    // Логика выхода
  }, []);
  
  return (
    <UserContext.Provider value={{ user, login, logout }}>
      {children}
    </UserContext.Provider>
  );
};

5. Кастомные хуки и абстракции

При создании переиспользуемых хуков:

// Кастомный хук с стабильным API
const useCounter = (initialValue = 0) => {
  const [count, setCount] = useState(initialValue);
  
  const increment = useCallback(() => setCount(c => c + 1), []);
  const decrement = useCallback(() => setCount(c => c - 1), []);
  const reset = useCallback(() => setCount(initialValue), [initialValue]);
  
  return { count, increment, decrement, reset };
};

Когда НЕ нужно использовать useCallback

// Излишнее использование - функция простая и не передается
const UnnecessaryComponent = () => {
  // ❌ Излишне - функция не передается и не используется в зависимостях
  const calculate = useCallback((a, b) => a + b, []);
  
  // ✅ Лучше так - проще и производительнее
  const calculate = (a, b) => a + b;
  
  return <div>{calculate(2, 3)}</div>;
};

Практические рекомендации

Приоритеты применения:

1. Высокий приоритет: Функции, передаваемые в React.memo компоненты
2. Высокий приоритет: Зависимости в useEffect, useMemo, других useCallback
3. Средний приоритет: Функции в контексте или глобальном состоянии
4. Низкий приоритет: Простые внутренние функции компонента

Производительность:

• Помните, что useCallback сам имеет накладные расходы
• Не используйте его везде "на всякий случай"
• Профилируйте приложение с помощью React DevTools для выявления реальных проблем

// Правильный подход - профилирование и целевое применение
const OptimizedComponent = ({ items, onItemSelect }) => {
  // useCallback только для критичных функций
  const handleClick = useCallback((item) => {
    onItemSelect(item);
  }, [onItemSelect]);
  
  // Простая внутренняя функция - без useCallback
  const formatDate = (date) => new Date(date).toLocaleDateString();
  
  return (
    <div>
      {items.map(item => (
        <MemoizedItem
          key={item.id}
          item={item}
          onClick={handleClick}
          formatDate={formatDate}
        />
      ))}
    </div>
  );
};

Заключение

Хотя передача в props оптимизированных компонентов — это наиболее важный и частый случай использования useCallback, хук имеет более широкое применение. Ключевой принцип: useCallback нужен везде, где стабильность ссылки на функцию имеет значение — будь то оптимизация рендеров, корректная работа эффектов или интеграция с внешними API.

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