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

Question

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

const something = useSomething()

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

如果你现在在useEffect(() =>...)中使用这个something值，并且你没有将something作为依赖传递给 useEffect 的第二个参数的数组，那么useEffect会警告你：

React Hook useEffect 缺少依赖项：'something'。 包括它或删除依赖数组。 (react-hooks/exhaustive-deps)

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

有没有更好的解决方案，而不是为了让 Linter 开心而不必要地向useEffect的依赖数组中添加类似的东西？

请在这里找到一个简单的演示： https://codesandbox.io/s/sad-kowalevski-yfxcn演示只是为了显示 ESLint 警告，仅此而已]

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

Answer 1

这里

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

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

如果它确实是恒定的，那么在 deps 中指定它并没有什么坏处。 例如，自定义 Hook 中的 setState function 被返回到您的组件，然后您从效果中调用它。 lint 规则不够聪明，无法理解这样的间接性。 但另一方面，任何人都可以在返回之前包装该回调，并可能在其中引用另一个道具或 state。 那么它就不会是一成不变的，如果你不能处理这些变化。 你会有讨厌的陈旧道具/状态错误。 所以指定它是一个更好的默认值。

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

Answer 2

这个例子有点做作，但我怀疑你可能希望创建一个没有这种依赖关系的新useEffect块。

如果商店没有改变，尽管我会质疑您为什么希望控制台记录它的时间。 如果您希望仅在更改时记录它，那么您可以将someStore添加到您的依赖项数组中。 这实际上取决于您要实现的目标和关注点的分离。

我认为如果someStore用作在此效果中处理的任何逻辑的一部分，那么它确实属于您的依赖项数组。

您也可以将const something = useSomething()移动到您的效果中并将其提取为自定义挂钩链接

useEffect(() => {
    console.log("Current state (may change)", someState);

  }, [someState]); 

useEffect(() => {
    console.log("Current store (will never change)", someStore);
  });