是否应该将 setter 函数传递到 React hook 的依赖数组中？

Question

最近我在同事的 React 代码中看到了一些将 setter 函数传递到钩子依赖数组中的示例，这对我来说看起来不太正确。例如：

const MyComponent = () => {
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    doSomeBigLongNetworkRequest();
    setLoading(false);
  }, [setLoading, /* other deps */]);
  // ...
}

我的感觉是他们误解了依赖数组的目的，据我所知，这是为了指示要监视哪些状态，以便钩子可以在它们更改时再次触发，不是只是简单地指示该钩子需要使用

setLoading

函数。由于

setLoading

函数实际上从未改变，因此将其包含在依赖项中不会执行任何操作。

我是否正确，或者将 setter 包含在数组中是否有意义？我的另一个想法是，也许这只是一个 linter 错误，因为 linter 无法识别该函数是 setter，并认为它可能会改变。

我还应该补充一点，在我见过的实例中，它们包含了 setter，但不包含变量。因此，在上面的示例中，依赖项数组中将包含 setLoading，而不是

loading

，并且挂钩实际上并不需要

loading

的值。

Answer 1

docs

的引用：

React保证setState函数身份稳定并且不会 重新渲染时发生变化。这就是为什么可以安全地从 useEffect 中省略 或 useCallback 依赖列表。

但是

注意

，如果 useState 作为 prop 传递，您可能必须将其用作依赖项：

省略

始终稳定的依赖关系

仅当 linter 可以时才有效 “看到”物体是稳定的。例如，如果 ref 是从 a 传递的 父组件，您必须在依赖项中指定它 大批。然而，这很好，因为你无法知道父母是否 组件始终传递相同的引用，或传递多个引用之一 有条件地。所以你的效果将取决于传递的引用。

虽然上面的示例提到了 refs，但我认为同样适用于

useState

，因为它们都是始终稳定的依赖项。