消除React的useEffect中的冗余依赖

Question

我有一个 useEffect，它有两个依赖项：

useEffect(() => {
   doSomething();
}, [currentTenant, currentProjects])

但是，currentProjects 正在 useEffect 中设置，该 useEffect 具有 currentTenant 作为依赖项：

useEffect(() => {
   setCurrentProjects();
}, [currentTenant]);

doSomething() 取决于这两个状态，所以我想知道当 currentTenant 更改时 doSomething() 是否会运行两次：一次当 currentTenant 本身更改时，一次当 currentProjects （由 currentTenant 控制） ) 更改。< /p>

这是多余的吗？这样做更好的方法是什么？也许通过从 doSomething() useEffect 中删除 currentTenant 。

预先感谢您的帮助。

Answer 1

我认为你让事情变得容易出错并且不必要地复杂化。根据我的经验，每当人们。尝试聪明地使用 useEffect，他们只是破坏了它。

首先，确保 currentTenant 和 currentProjects 是原语 - 我想情况还不是这样（例如名为 currentProjects 的东西），因此您的依赖项无论如何都不会按预期工作。

其次，如果可能的话，内联 doSomething() 和 setCurrentProjects() 的代码，这样可以更轻松地跟踪您实际依赖的变量/依赖项。如果您已将这些方法传递给组件或在多个位置使用它们，则存在例外情况。

第三，不要依赖调用多个 useEffect 挂钩的执行顺序。文档中没有保证顺序，而且对于异步调用来说也没有多大意义。使它们彼此独立。因此，在无法确定的情况下不要假设冗余。此外，即使它按预期工作，这也是过早的优化 - 好处可以忽略不计，但代码更难理解。

第四，您依赖于组件中不会发生任何变化的想象力，并且您未来的自己以及您的同事将确切地知道/记住您的依赖性考虑因素。或者你必须用冗长的解释来评论它，让想法变得更加复杂。

一般来说，useEffect 依赖项应尽可能简单且富有表现力。他们没有太多魔法，但有很多人。尽管如此（包括我）有时也会把它们搞砸。当您大多数时候偏离“仅列出您正在使用的所有基元”规则时，就会发生这种情况。