useMemo

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

Что делает useMemo?

useMemo принимает два аргумента:

Функция вычисления — код, который возвращает значение, которое вы хотите кэшировать.
Массив зависимостей — список значений, от которых зависит результат вычисления. Если хоть одна зависимость изменилась, функция выполняется заново.

Хук возвращает мемоизированное значение, которое остаётся неизменным между рендерами, пока зависимости не изменятся.

Когда использовать useMemo?

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

Пример кода

//filteredItems пересчитывается только при изменении filter или items.

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

function ListFilter() {
  const [items] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
  const [filter, setFilter] = useState(5);

  const filteredItems = useMemo(() => {
    console.log('Фильтруем массив...');
    return items.filter(item => item > filter);
  }, [filter, items]);

  return (
    <div>
      <input
        type="number"
        value={filter}
        onChange={(e) => setFilter(Number(e.target.value))}
      />
      <ul>
        {filteredItems.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default ListFilter;

Важно

Производительность: Используйте useMemo только для действительно дорогих вычислений. Если операция простая (например, a + b), кэширование может быть избыточным и даже замедлить работу из-за накладных расходов.
Сравнение зависимостей: React проверяет зависимости по поверхностному сравнению (как в useEffect). Если зависимости — объекты или массивы, убедитесь, что их ссылки стабильны.
Возврат значения: useMemo возвращает результат функции, а не саму функцию (в отличие от useCallback).