В чем разница между useMemo и React.memo

Ответ

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

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

React.memo — это HOC (Higher-Order Component), который мемоизирует сам компонент, предотвращая его перерендер, если пропсы не изменились. Оптимизирует рендер дочерних компонентов.

const MemoizedComponent = React.memo(MyComponent);

Ключевые отличия:

  • useMemo кэширует значение, React.memo — компонент.
  • useMemo работает внутри компонента, React.memo оборачивает компонент.
  • useMemo зависит от зависимостей, React.memo — от пропсов.