Как с помощью useMemo предотвратить пересоздание массива при каждом рендере компонента?

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

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

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

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

Пример кода

import React, { useMemo } from 'react';

function MyComponent({ items, filter }) {
  // Без useMemo: каждый рендер создаёт новый массив
  // const filteredItems = items.filter(item => item.includes(filter));

  // С useMemo: массив пересоздаётся только при изменении items или filter
  const filteredItems = useMemo(() => {
    return items.filter(item => item.includes(filter));
  }, [items, filter]);

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

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

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

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