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

useMemo мемоизирует результат вычисления функции, чтобы не пересчитывать его при каждом рендере, если зависимости не изменились.
useCallback мемоизирует саму функцию, возвращая ту же ссылку, если зависимости не изменились.

React.memo — это HOC, который мемоизирует компонент, предотвращая его повторный рендер, если пропсы не изменились по ссылке.

Взаимодействие:

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

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

Пример:

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

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

  // Без useCallback функция создается заново при каждом рендере
  // const handleClick = () => setCount(c => c + 1);

  // С useCallback функция мемоизируется
  const handleClick = React.useCallback(() => setCount(c => c + 1), []);

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

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

useMemo полезен, когда нужно мемоизировать вычисления, например, сложные вычисления или создание объектов, которые передаются в пропсы.

Расскажи про useMemo, useCallback и их взаимодействие с React.memo. Особенности взаимодействия.