コンポーネントで1つまたは複数のuseEffectを使用する必要がありますか？

Question 1

適用するいくつかの副作用があり、それらを整理する方法を知りたいです：

単一のuseEffectとして
またはいくつかのuseEffects

パフォーマンスとアーキテクチャの点で何が優れていますか？

Question 2

従う必要のあるパターンは、ユースケースによって異なります。

まず、最初のマウント中にイベントリスナーを追加し、アンマウント時にそれらをクリーンアップする必要がある状況と、特定のリスナーをクリーンアップして小道具の変更時に再度追加する必要がある場合があります。このような場合、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番目：異なる値の変更に対して異なるアクションを実行する必要がある場合の3番目のケース。このような場合、関連する比較を異なるものに分けてくださいuseEffects

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

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

Question 3

reactjs.org https://reactjs.org/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concernsで提案されているように、複数の効果を使用して関心の分離を行う必要があります