Когда лучше использовать useMemo?

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

Пример использования:

import React, { useMemo } from 'react';

function ExpensiveComponent({ items }) {
  const computedValue = useMemo(() => {
    // Тяжёлая операция, например, сортировка или фильтрация большого массива
    return items.filter(item => item.active).map(item => item.value).reduce((a, b) => a + b, 0);
  }, [items]);

  return <div>Сумма активных значений: {computedValue}</div>;
}

Таким образом, useMemo стоит применять, когда:

• Результат вычисления зависит от входных данных (зависимостей).
• Вычисление ресурсоёмкое и может замедлять рендер.
• Вы хотите избежать лишних пересчётов при неизменных данных.