React useCallback 设置依赖于在回调中调用的 function

Question

我正在使用 react 开发 web 应用程序，并看到它在那里实现。 它是这样的：

const onAddNewAccount = useCallback(async () => {
   await refetch();
   setOtherState((prev) => {...});
},
[refetch]);

我不明白为什么要这样做，这实际上是正确的吗？ 因为据我了解，回调将在依赖项之一发生变化时被调用。

从我所见，调用refetch实际上不会触发useCallback可能是因为它只是被调用了吗？ 没有改变。

所以基本上我需要帮助来理解他们为什么这样做。

Answer 1

回调将在依赖项之一发生变化时被调用。

不，它不会被调用，它只会被重新创建。 useCallback的目的是记住 function 并在没有任何变化的情况下重用它。 换句话说，它试图从渲染 1 的onAddNewAccount === 来自渲染 2 的onAddNewAccount做到这一点。

如果refetch更改，则 memoization 将中断并创建一个新的 function。 这样，新的onAddNewAccount可以在需要时调用新的重新获取。 如果refetch永远不会改变，那就太好了：memoization 可以永远持续下去。