Sollte ich einen oder mehrere useEffect in Komponenten verwenden?

Ich muss einige Nebenwirkungen anwenden und möchte wissen, wie ich sie organisieren kann:

• als Single UseEffect
• oder mehrere useEffects

Was ist besser in Bezug auf Leistung und Architektur?

Das Muster, dem Sie folgen müssen, hängt von Ihrem useCase ab.

Erstens kann es vorkommen , dass Sie während des ersten Bereitstellens einen Ereignis-Listener hinzufügen und beim Aufheben der Bereinigung bereinigen müssen, und in einem anderen Fall muss ein bestimmter Listener bei einem Requisitenwechsel bereinigt und erneut hinzugefügt werden. In einem solchen Fall ist es besser, zwei verschiedene useEffect zu verwenden, um die relevante Logik zusammenzuhalten und Leistungsvorteile zu erzielen

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])

Zweitens: Es kann vorkommen, dass Sie einen API-Aufruf oder einen anderen Nebeneffekt auslösen müssen, wenn sich der Status oder die Requisiten innerhalb eines Sets ändern. In einem solchen Fall sollte eine Single useEffectmit den zu überwachenden relevanten Werten eine gute Idee sein

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

Drittens: Ein dritter Fall, in dem Sie unterschiedliche Maßnahmen zur Änderung unterschiedlicher Werte ergreifen müssen. Trennen Sie in einem solchen Fall relevante Vergleiche in verschiedeneuseEffects

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

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

Sie sollten mehrere Effekte verwenden, um Bedenken zu trennen, wie von reactjs.org https://reactjs.org/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns vorgeschlagen