React Hooks linting:这总是有意义的吗?

Question

众所周知，创建 - 反应app 3具有新的ESLINT规则：react-hooks/exhaustive-deps。当钩子的依赖性数组中缺少依赖关系时，会显示警告。但这并不总是有意义的。

某些依赖性可能是"沉默"或"弱"依赖性。

在代码中，我有以下情况：

const Project = ({ id, '*': tab }) => {
  const [{ openProjects }, { openProject, setProjectTab }] = useStore()
  useLayoutEffect(() => {
    if(find(openProjects, { id }))
      setProjectTab(id, tab)
    else openProject(id, tab)
  }, [tab])
  return (...)
}

给我：

第98行：React Hook Uselayouteffect缺少依赖关系： 'id'，" openproject"，" openprojects'和 " setProjectTab"。包括它们或删除依赖性数组 反应钩/详尽的deps

openProject和 setProjectTab是常数功能，它们总是指向相同的引用，因此我可以将它们包括在数组中以缩短警告。没有问题。

但是openProjects是我全局状态的数组，如Redux中的处理：每次都有更新，都会创建一个新数组。

但是，该更新精确地以效果进行，如果我将其添加为依赖关系，它将创建一个无限的更新循环。

so：

• 遵守林格规则：无限循环。
• 不遵守林格规则：烦人警告。

我在设计上错了，还是exhaustive-deps真的太过限制了，应该考虑弱依赖项的概念(即不 触发对变化的影响(？

Answer 1

如果某些效果取决于某些计算的结果，例如find(openProjects, { id })，但不在该计算的参数上，然后可以将其显式仅取决于该计算的结果，例如通过提取变量：

const isFound = find(openProjects, { id })
useLayoutEffect(() => {
  if(isFound)
    setProjectTab(id, tab)
  else openProject(id, tab)
}, [isFound, setProjectTab, openProject, id, tab])

我建议保持ESLINT规则启用，并对所有依赖关系的最小集合进行更加努力的思考，可能会影响代码执行结果。

Answer 2

我遇到了同样的问题。当我使用钩子时，我只包括变化依赖项数组中的变量，我不包括我知道不会更改的常数或数据。

您可以使用 // eslint-disable-next-line react-hooks / exhaustive-deps禁用下一行的覆盖。