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

Question

2 つの依存関係を持つ useEffect があります:

リーリー

ただし、currentProjects は useEffect に設定されており、依存関係として currentTenant があります:

リーリー

doSomething() はこれら 2 つの状態に依存するため、currentTenant が変更されたときに doSomething() が 2 回実行されるかどうか疑問に思っています。 #currentTenant 自体が変更され、currentProjects (currentTenant によって制御される) が変更されるときに 1 回変更されます。 < /p>これは冗長ですか?これを行うより良い方法は何でしょうか?おそらく

doSomething() useEffect から currentTenant を削除することによって可能です。

ご協力いただきありがとうございます。

Answer 1

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

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

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

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

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

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