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

Сценарий использования:

Если у вас есть компонент, который принимает callback-функцию как пропс, и этот компонент оптимизирован с помощью React.memo, то без useCallback дочерний компонент будет перерендериваться каждый раз, так как функция создаётся заново.

Пример:

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

const Button = React.memo(({ onClick, children }) => {
  console.log('Button rendered');
  return <button onClick={onClick}>{children}</button>;
});

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

  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, []);

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

Здесь useCallback предотвращает создание новой функции increment при каждом рендере, благодаря чему Button не перерендеривается без необходимости.

Расскажите про useCallback — сценарий использования, зачем нужен?