LETUNOFF DOCS

React. Memo и useMemo

🧱 Суть

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

В React есть два основных инструмента:

  • React.memo – запоминает компонент
  • useMemo – запоминает значение

📦 Проблема

В React нередко проводятся сложные вычисления и рендеринг, которые могут влиять на производительность.

✅ Решение

Использовать мемоизацию значений или компонентов.

💻 Код

React.memo

Что делает

memo – это обёртка для компонента, которая говорит React:

«Если пропсы не изменились – не вызывай этот компонент заново».

Пример:

const MyComponent = memo(() => {
  console.log('Рендер');
 
  return <div>Hello</div>;
});

Теперь:

родитель перерендерился
        ↓
React проверил props
        ↓
props не изменились
        ↓
MyComponent пропущен

Без memo

const Child = () => {
  console.log('Render');
 
  return <div>Child</div>;
};

Если родитель обновился:

Parent render
      ↓
Child render

Даже если данные ребёнка не изменились.

С memo

const Child = memo(() => {
  console.log('Render');
 
  return <div>Child</div>;
});

Теперь:

Parent render
      ↓
props одинаковые
      ↓
Child пропущен

useMemo

Что делает

useMemo – это хук, который сохраняет результат вычисления.

Пример:

const value = useMemo(() => {
  return heavyCalculation(data);
}, [data]);

Логика:

data изменилась
        ↓
пересчитать значение
 
data прежняя
        ↓
взять значение из кеша

Без useMemo

const result = heavyCalculation(items);

При каждом рендере:

render
 ↓
heavyCalculation()
 ↓
новое вычисление

С useMemo

const result = useMemo(() => {
  return heavyCalculation(items);
}, [items]);

Теперь вычисление произойдёт только если:

items !== старый items

Главное отличие

ИнструментЧто сохраняетГде используетсяЗачем
React.memoкомпонентвокруг компонентапропустить лишний ререндер
useMemoзначениевнутри компонентане повторять вычисление

Почему нельзя использовать memo везде

Мемоизация тоже имеет стоимость.

React должен:

  1. хранить предыдущие props
  2. сравнивать новые props со старыми
  3. решать, нужен ли ререндер

Иногда:

сравнить props
        ↓
дороже
чем
просто сделать render

🎯 Вывод

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

🔗 Связано

Обратные ссылки