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

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

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

Взаимосвязь: React.memo использует поверхностное сравнение пропсов, чтобы решить, нужно ли перерендеривать компонент. Если пропсы — это функции или объекты, которые создаются заново при каждом рендере, React.memo не поможет, потому что ссылки меняются.

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

Пример:

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

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

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

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

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

Что такое React.memo, чем отличается от хуков useMemo/useCallback, и как они взаимосвязаны?