Когда лучше использовать useMemo?

Что такое useMemo

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

Когда применять

Используйте useMemo, когда:

• Вычисление занимает заметное время (например, обработка больших массивов, сложные математические операции).
• Результат используется в зависимостях других хуков (например, useEffect) или передаётся в мемоизированные дочерние компоненты (React.memo).
• Зависимости меняются редко, и вы хотите сохранить стабильную ссылку на объект.

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

Пример

import { useMemo, useState } from 'react';

function List({ items, filter }) {
  const filtered = useMemo(() => {
    return items.filter(item => item.name.includes(filter));
  }, [items, filter]);

  return <ul>{filtered.map(item => <li key={item.id}>{item.name}</li>)}</ul>;
}

Здесь фильтрация выполняется только при изменении items или filter, а не на каждом рендере.

Вывод

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