useMemo 与 useEffect + useState

使用有什么好处吗useMemo（例如，对于密集的函数调用）而不是使用组合useEffect and useState?

这里有两个定制的钩子，乍一看它们的工作原理完全相同，此外useMemo的返回值为null在第一次渲染时：

useEffect 和 useState

import { expensiveCalculation } from "foo";

function useCalculate(someNumber: number): number | null {
  const [result, setResult] = useState<number | null>(null);

  useEffect(() => {
    setResult(expensiveCalculation(someNumber));
  }, [someNumber]);

  return result;
}

useMemo

import { expensiveCalculation } from "foo";

function useCalculateWithMemo(someNumber: number): number {
    return useMemo(() => {
        return expensiveCalculation(someNumber);
    }, [someNumber]);
};

两者都计算每次参数的结果someNumber变化，记忆在哪里useMemo踢进去？

The useEffect and setState每次更改都会导致额外的渲染：第一个渲染将“落后于”过时的数据，然后它会立即使用新数据对额外的渲染进行排队。

假设我们有：

// Maybe I'm running this on a literal potato
function expensiveCalculation(x) { return x + 1; };

让我们假设x最初为 0：

• The useMemo版本立即呈现1.
• The useEffect版本呈现null，然后在组件渲染后，效果运行，更改状态，并将新渲染排队1.

那么如果我们改变x to 2:

• The useMemo运行并且3被渲染。
• The useEffect版本运行并渲染1再次，然后效果触发并且组件以正确的值重新运行3.

就频率而言expensiveCalculation运行时，两者具有相同的行为，但是useEffect版本导致两倍的渲染，这由于其他原因对性能不利。

另外，useMemoIMO，版本更干净，更具可读性。它不会引入不必要的可变状态，并且移动部件更少。

所以你最好只使用useMemo here.