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

Question

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

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

我的感觉是他们误解了依赖数组的目的，据我理解，依赖数组是为了指示要监视哪些状态，以便钩子在它们更改时可以再次触发，而不是简单地指示钩子需要使用该setLoading功能。由于该setLoading函数实际上从未改变，因此将其包含在依赖项中不会执行任何操作。

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

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

Answer 1

是的，你是对的，没有必要包括它们。这是文档的引用：

\n

\n

React 保证 setState 函数身份是稳定的，并且在重新渲染时不会改变。这就是为什么它\xe2\x80\x99 可以安全地从 useEffect\nor useCallback 依赖项列表中省略。

\n

\n

一般来说，再次根据文档，有关依赖项数组的建议是：

\n

\n

如果您使用此优化，请确保数组包含组件范围中随时间变化且由效果使用的所有值（例如 props 和 state）。否则，您的代码\n将引用先前渲染中的陈旧值。

\n

\n