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

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

Пример:

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

Здесь computeExpensiveValue будет вызвана только если изменятся a или b.

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

Оборачивать дочерний компонент в React.memo нужно, если:

компонент рендерится часто,
и при этом пропсы не меняются,
и ререндер компонента дорогой.

Итого:

useMemo оптимизирует вычисления внутри компонента,
React.memo оптимизирует рендер дочерних компонентов.

Оба инструмента можно использовать вместе для повышения производительности, но применять их стоит только при реальной необходимости, чтобы не усложнять код.

Что делает useMemo? Когда его использовать? Нужно ли оборачивать дочерний компонент в React.memo?