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

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

Пример:

const ExpensiveComponent = React.memo(({ onClick }) => {
  console.log('Render ExpensiveComponent');
  return <button onClick={onClick}>Click me</button>;
});

function Parent({ value }) {
  const handleClick = useCallback(() => {
    console.log('Clicked');
  }, []);

  const computedValue = useMemo(() => {
    // дорогое вычисление
    return value * 2;
  }, [value]);

  return (
    <div>
      <div>{computedValue}</div>
      <ExpensiveComponent onClick={handleClick} />
    </div>
  );
}

Здесь useMemo предотвращает повторное дорогое вычисление, useCallback сохраняет ссылку на функцию, а React.memo предотвращает лишний рендер дочернего компонента.

Когда нужна мемоизация в React? useMemo, useCallback, React.memo.