[解決済み】一般的に、1つのコンポーネントで1つのuseEffectフックと多くのuseEffectフックのどちらを使用するのが良いのでしょうか？[クローズド］

質問

リアクトコンポーネントに適用する副作用がいくつかありますが、それらを整理する方法を知りたいです。

• 1つのuseEffectとして
• または複数のuseEffect

パフォーマンスやアーキテクチャの面ではどちらが優れているのでしょうか？

解決方法は？

従うべきパターンは、ユースケースによって異なります。

最初に 最初のマウント時にイベントリスナーを追加し、アンマウント時にそれらをクリーンアップする必要がある状況や、特定のリスナーをクリーンアップし、プロップ変更時に再追加する必要があるケースがあるかもしれません。

このような場合、2つの異なる useEffect の方が、関連するロジックをまとめておくことができ、またパフォーマンス的にも有利です。

useEffect(() => {
   // adding event listeners on mount here
   return () => {
       // cleaning up the listeners here
   }
}, []);

useEffect(() => {
   // adding listeners everytime props.x changes
   return () => {
       // removing the listener when props.x changes
   }
}, [props.x])

2番目 ステートまたはプロップのいずれかが定義されたセットから変更されたときに、APIコールまたは他のサイドエフェクトをトリガーする必要があります。そのような場合、単一の useEffect というように、関連する依存関係を監視するのがよいでしょう。

useEffect(() => {
    // side effect here on change of any of props.x or stateY
}, [props.x, stateY])

第3位 異なる変更のセットに対して別々のサイドエフェクトが必要です。そのような場合、関連する副作用を異なる useEffect s

useEffect(() => {
   // some side-effect on change of props.x
}, [props.x])

useEffect(() => {
   // another side-effect on change of stateX or stateY 
}, [stateX, stateY])