油门 /调试UseMemo值

Question

有没有什么方法可以使用 useMemo 来消除/限制 React 中的计算值？

我经常看到在 React 中创建去抖动/限制函数的解决方案，就像这个例子一样：

const debouncedEventHandler = useMemo(
  () => debounce(eventHandler, 300),
  []
);

const throttledEventHandler = useMemo(
  () => throttle(eventHandler, 300),
  []
);

<button onClick={debouncedEventHandler}>Click Me</button>

但我正在寻找的是一种去抖动/限制值的方法，而不是函数，例如：

const App = ({ veryBigArray }) => {
  // Throttle this value
  const heavyComputedValue = useMemo(
    () => veryBigArray.reduce( ... ),
    [veryBigArray]
  );

  return <div>{heavyComputedValue}</div>
}

由于 veryBigArray 中的更改，App 将重新渲染很多次，其中 heavyCompulatedValue 不需要每次重新渲染时都是最新的。

因此，我正在寻找一种方法，使我的 useMemo 仅计算间隔（节流）上的实际值，而不引入新状态。