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

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

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

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

const MemoComponent = React.memo(MyComponent);

useCallback кэширует саму функцию, а не её результат. Полезен при передаче колбэков в дочерние компоненты.

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

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

• useMemo — для значений
• useCallback — для функций
• React.memo — для компонентов