React、ESLint：eslint-plugin-react-hooks 显示不正确的“缺少依赖项”

Question

假设您正在使用 React 并且正在编写一个自定义钩子useSomething，每次为同一组件调用该钩子时，该钩子都会返回相同的内容。

const something = useSomething()

// useSomething() at time X  === useSomething() at time Y

something如果您现在在 a 内部使用此值useEffect(() => ...)，并且没有将其something作为依赖项传递给第二个参数的数组，那么useEffectlinter 会警告您：

React Hook useEffect 缺少依赖项：“something”。包含它或删除依赖项数组。（反应钩子/详尽的依赖）

当然，ESLint 无法知道它something总是保持相同（每个组件），但是添加不变的东西（例如每次使用它们时something的依赖数组）useEffect确实很烦人。仅停用react-hooks/exhaustive-deps似乎也不是一个好的解决方案（也不使用// eslint-disable-next-line react-hooks/exhaustive-deps）。

useEffect有没有更好的解决方案，而不是为了让 Linter 满意而将不必要的东西添加到依赖项数组中？

请在这里找到一个简单的演示： https: //codesandbox.io/s/sad-kowalevski-yfxcn [编辑：请注意，问题是关于上面描述的一般模式，而不是关于这个愚蠢的小演示 ​​- 这样做的目的demo 只是显示 ESLint 警告，没有别的]

[编辑] 请在此处找到附加演示： https ://codesandbox.io/s/vibrant-tree-0cyn1

Answer 1

这里

\n\n

https://github.com/facebook/react/issues/14920#issuecomment-471070149

\n\n

例如，您可以阅读以下内容：

\n\n

\n

如果它确实是恒定的，那么在 deps 中指定它不会有什么坏处。例如，自定义 Hook 内的 setState 函数返回到您的组件，然后您从效果中调用它。lint 规则不够智能，无法理解这样的间接。但另一方面，任何人都可以稍后在返回之前包装该回调，并可能引用其中的另一个 prop 或状态。那么它就不会\xe2\x80\x99 不变！如果你无法处理这些更改，你\xe2\x80\x99将会遇到令人讨厌的陈旧道具/状态错误。所以指定它是更好的默认值。

\n

\n\n

因此，也许只需将不变的值添加到依赖项数组中useEffect可能是最好的解决方案。尽管如此，我还是希望有类似 ESLint react-hooks 配置的可能性来定义一个钩子名称列表，其返回值应被视为静态。

\n