Чем поможет useMemo при оптимизации компонента с частыми обновлениями состояния?

Что такое useMemo и зачем он нужен

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

Как это работает

При каждом рендере React выполняет тело компонента. Если внутри есть тяжёлые вычисления (например, сортировка, фильтрация, сложные математические операции), они будут запускаться снова и снова, даже если входные данные не изменились. useMemo решает эту проблему, кэшируя результат до тех пор, пока зависимости не изменятся.

Пример кода

import React, { useState, useMemo } from 'react';

function ExpensiveList({ items, filter }) {
  // Без useMemo: фильтрация выполняется на каждом рендере
  // С useMemo: только при изменении items или filter
  const filteredItems = useMemo(() => {
    console.log('Фильтрация...');
    return items.filter(item => item.includes(filter));
  }, [items, filter]);

  return (
    
      {filteredItems.map((item, index) => (
        {item}
      ))}
    
  );
}

function App() {
  const [count, setCount] = useState(0);
  const items = ['apple', 'banana', 'cherry', 'date'];
  const [filter, setFilter] = useState('');

  return (
    
       setCount(c => c + 1)}>Count: {count}
       setFilter(e.target.value)} />
      
    
  );
}

В этом примере при нажатии на кнопку обновляется состояние count, что вызывает ререндер App и ExpensiveList. Без useMemo фильтрация выполнялась бы каждый раз, даже если items и filter не изменились. С useMemo она выполняется только при изменении items или filter.

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

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

Вывод: useMemo помогает оптимизировать производительность React-компонентов, предотвращая ненужные повторные вычисления при частых обновлениях состояния, но применяйте его осознанно, только для действительно тяжёлых операций.