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

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

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

import React, { useMemo } from 'react';

function SumComponent({ numbers }) {
  const total = useMemo(() => {
    console.log('Вычисляем сумму');
    return numbers.reduce((acc, num) => acc + num, 0);
  }, [numbers]);

  return <div>Сумма: {total}</div>;
}

Здесь сумма будет пересчитываться только тогда, когда изменится массив numbers. Это повышает производительность, особенно при сложных вычислениях.