Что мемоизируют useCallback, useMemo и React.memo и как они работают вместе?

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

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

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

Пример:

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

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

const MemoizedComponent = React.memo(MyComponent);

Итого:

• useMemo — мемоизация значения
• useCallback — мемоизация функции
• React.memo — мемоизация компонента по пропсам