React中useMemo为何在依赖项变化时重复执行？

你对useMemo的理解存在误区：useMemo的缓存触发逻辑只看依赖数组内的变量是否发生变化，和回调函数的返回值没有任何关系。

你的代码里把count加入了useMemo的依赖数组，每次点击修改count时，依赖数组的内容发生变化，React就会重新执行useMemo里的回调函数——不管你返回的是固定值2还是其他内容，都会触发console.log("call")。

如果你的回调函数不需要依赖count，只想固定缓存这个返回值，只需要把依赖数组改成空数组即可：

const label = useMemo(() => {
    console.log("call");
    return 2;
}, []);

这样组件只有首次渲染时会执行一次回调，后续无论count如何变化，都不会再触发useMemo的回调函数。

内容的提问来源于stack exchange，提问作者Taiwan No.1