Есть ли смысл оборачивать отфильтрованный список в useMemo, и в каких случаях?

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

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

Когда оборачивать отфильтрованный список в useMemo

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

Пример: у вас есть список товаров, и пользователь вводит текст в поле поиска. Каждый раз, когда пользователь печатает, состояние поискового запроса обновляется, и компонент перерисовывается. Без useMemo фильтрация будет выполняться заново при каждом рендере, даже если запрос не изменился (например, из-за изменения других состояний). С useMemo результат фильтрации будет пересчитываться только при изменении запроса или исходного массива.

import { useMemo, useState } from 'react';

function ProductList({ products }) {
  const [query, setQuery] = useState('');

  const filteredProducts = useMemo(() => {
    return products.filter(product =>
      product.name.toLowerCase().includes(query.toLowerCase())
    );
  }, [products, query]);

  return (
    <div>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <ul>
        {filteredProducts.map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

Когда useMemo не нужен

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

Вывод

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