React useCallback 设置对回调内部调用的函数的依赖答案

【问题标题】：React useCallback setting dependency on a function called inside the callbackReact useCallback 设置对回调内部调用的函数的依赖
【发布时间】：2021-11-25 16:27:56
【问题描述】：

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

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

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

根据我所见，调用refetch 不会真正触发useCallback 可能是因为它只是被调用了对吗？没有改变。

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

【问题讨论】：

标签： javascript reactjs typescript react-hooks

【解决方案1】：

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

不，它不会被调用，它只会被重新创建。 useCallback 的目的是记住函数并在没有任何变化的情况下重用它。换句话说，它试图让onAddNewAccount from render 1 === onAddNewAccount from render 2。

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

【讨论】：

哦，我想我明白了。所以refetch 在 deps 中，以防这个组件是从另一个具有不同 refetch 实现的父组件调用的，是吗？
这样onAddNewAccount 将使用不同的重新获取方法重新创建
in case this component is called from another parent component with a different refetch implementation 以防重新获取从一个渲染到下一个渲染的更改。例如，如果父组件重新渲染并创建一个新的 refetch 函数。 that way onAddNewAccount will be recreated with the different refetch method 正确