Зачем нужен React-хук useCallback?

Что такое useCallback

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

Зачем это нужно

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

Пример использования

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

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

  const handleClick = useCallback(() => {
    setCount(c => c + 1);
  }, []); // пустые зависимости — функция стабильна

  return <Child onClick={handleClick} />;
}

const Child = React.memo(({ onClick }) => {
  console.log('Child re-rendered');
  return <button onClick={onClick}>Click</button>;
});

В этом примере Child не будет ререндериться при изменении count, потому что handleClick не меняется. Без useCallback Child ререндерился бы каждый раз, так как ссылка на функцию была бы новой.

Когда применять

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

Итог: useCallback помогает стабилизировать ссылки на функции и улучшить производительность React-приложений, но применять его следует осознанно, только там, где это действительно даёт выигрыш.