Зачем нужен хук useMemo?

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

Сигнатура

const visibleItems = useMemo(
  () => items.filter((item) => item.matches(query)),
  [items, query],
);

• Первый аргумент — функция-фабрика, возвращающая значение.
• Второй — массив зависимостей; при их изменении значение пересчитывается.

Какие задачи решает

• Дорогие вычисления — фильтрация и сортировка больших списков, сложные преобразования данных не выполняются заново при каждом рендере.
• Стабильные ссылки — объект или массив, создаваемый в рендере, каждый раз новый. Если он уходит пропом в React.memo-компонент или стоит в зависимостях useEffect, useMemo сохраняет одну ссылку и предотвращает лишние срабатывания.

const chartConfig = useMemo(() => ({ type: 'bar', data }), [data]);
return <Chart config={chartConfig} />; // Chart в React.memo не перерендерится зря

Нюансы и частые ошибки

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

Коротко для собеседования

useMemo кеширует результат вычисления между рендерами и пересчитывает его только при изменении зависимостей. Нужен для дорогих вычислений и для стабильных ссылок на объекты/массивы, чтобы не ломать React.memo и зависимости эффектов.