React の useEffect での冗長な依存関係を排除する

Question

useEffect(()=>{doSomething();},[currentTenant,currentProjects]) という 2 つの依存関係を持つ useEffect があります。ただし、currentProjects は、依存関係として currentTenant を持つ useEffect に設定されています。 useEffect(( )=>{ setCurrentProjects();},[現在

P粉291886842 · Answer

物事を間違いが発生しやすく、不必要に複雑にしていると思います。私の経験では、人はいつでも。 useEffect を賢く使おうとして、それを壊してしまいました。

まず、currentTenant と currentProjects がプリミティブであることを確認します。おそらくまだそうではないと思います (たとえば、currentProjects という名前のもの)。いずれにしても期待どおりには機能しません。

2 番目に、可能であれば、doSomething() と setCurrentProjects() のコードをインライン化して、実際に依存している変数/依存関係を簡単に追跡できるようにします。これらのメソッドをコンポーネントに渡したり、複数の場所で使用したりする場合は例外が存在します。

第三に、複数の useEffect フックが呼び出される順序に依存しないでください。ドキュメントには順序が保証されておらず、非同期呼び出しではあまり意味がありません。それらを互いに独立させます。したがって、確実性を持たずに冗長性を想定しないでください。さらに、たとえ期待どおりに動作したとしても、これは時期尚早の最適化です。メリットはごくわずかですが、コードを理解するのが難しくなります。

4 番目に、コンポーネントは何も変更されず、将来の自分や同僚は依存関係の考慮事項を正確に知っている/覚えているだろうという想像力に頼っています。あるいは、アイデアをより複雑にしてしまうような長い説明をコメントしなければなりません。

一般に、useEffect の依存関係は、可能な限りシンプルかつ表現力豊かである必要があります。彼らは魔法をあまり持っていませんが、人々はたくさんいます。今でも（私も含めて）時々台無しにしてしまいます。これは、「使用しているすべてのプリミティブをリストするだけ」というルールから逸脱している場合に発生します。