Почему useCallback помогает избежать лишних рендеров при передаче функции в дочерний компонент?

Проблема: новые ссылки на функции

В React при каждом рендере компонента все функции, объявленные внутри него, создаются заново. Это означает, что даже если логика функции не менялась, ссылка на неё становится новой. Когда такая функция передается в дочерний компонент, обернутый в React.memo, сравнение пропсов по ссылке показывает, что функция изменилась, и дочерний компонент рендерится повторно, даже если его остальные пропсы и состояние не изменились.

Решение: useCallback

Хук useCallback принимает функцию и массив зависимостей. Он возвращает мемоизированную версию функции, которая остается той же самой ссылкой, пока зависимости не изменятся. Это позволяет дочерним компонентам с React.memo корректно определять, что пропс-функция не изменилась, и пропускать лишний рендер.

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

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

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

  return (
    <div>
      <Child onClick={handleClick} />
      <input value={text} onChange={e => setText(e.target.value)} />
    </div>
  );
}

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

В примере выше, когда пользователь вводит текст в input, состояние text меняется, вызывая рендер Parent. Без useCallback функция handleClick была бы пересоздана, и Child рендерился бы снова. С useCallback ссылка на handleClick стабильна, поэтому Child не рендерится лишний раз.

Когда использовать

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

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