消除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 依賴項應盡可能簡單且富有表現力。他們沒有太多魔法，但有很多人。儘管如此（包括我）有時也會把它們搞砸。當您大多數時候偏離「僅列出您正在使用的所有基元」規則時，就會發生這種情況。