usememo react как использовать

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

import React, { useMemo } from 'react';

function MyComponent(props) {
  const result = useMemo(() => {
    // здесь происходит долгое вычисление результата
    return props.someProp * 2;
  }, [props.someProp]); // второй аргумент - это массив зависимостей

  return <div>{result}</div>;
}

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

Таким образом, в примере выеше результат функции вычисляется только тогда, когда изменяется props.someProp, и сохраняется в result. При повторном рендеринге компонента MyComponent с тем же значением props.someProp, ранее вычисленный результат будет использован из кэша, а не будет происходить повторное долгое вычисление.

Важно отметить, что использование useMemo не всегда приводит к оптимизации производительности, поэтому не всегда стоит его применять. Например, если вычисление результата функции происходит мгновенно, то кэширование может привести к дополнительным затратам на сохранение и чтение кэша.