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

Основное различие

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

Примеры использования

React.memo применяется к компоненту:

const MyComponent = React.memo(({ data }) => {
  console.log('Rendered');
  return <div>{data}</div>;
});

useMemo используется внутри функционального компонента:

const sortedList = useMemo(() => {
  return items.sort((a, b) => a - b);
}, [items]);

Когда что применять

• React.memo — когда нужно избежать повторного рендера целого компонента при неизменных пропсах.
• useMemo — когда нужно избежать дорогих вычислений или сохранить ссылочную стабильность объекта/массива между рендерами.

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