Sollte ich einen oder mehrere useEffect in Komponenten verwenden?

105

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?

Vadim
quelle

Antworten:

162

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])
Shubham Khatri
quelle
1
Was ist mit einem Mittelweg zwischen dem zweiten und dritten Beispiel oben?: Sie haben eine Logik, die ausgeführt wird, wenn sich eine Teilmenge von Status / Requisiten ändert, aber jede hat eine separate Logik, die zusätzlich zu einem allgemeinen Code ausgeführt werden muss, der ausgeführt werden muss? Sie würden es nicht verwenden [](da es sich immer noch nur um eine Teilmenge von Status / Requisiten handelt, auf die Sie Änderungen warten), aber Sie möchten auch Code wiederverwenden. Verwenden Sie separate useEffectsund fügen Sie den gemeinsam genutzten Code in eine Funktion ein, die sie jeweils separat aufrufen?
Öko
2
Wie aus der folgenden Antwort hervorgeht, schlägt das React-Team vor, die Hooks nach Bedenken zu trennen, damit Sie sie in mehrere useEffectAnrufe aufteilen können .
Hakazvaka
28
Mir gefällt, wie Sie useCase geschrieben haben.
VerticalGrain
Werden sie immer in der Reihenfolge ihrer Definition ausgelöst? dh effekt1 wird immer zuerst aufgerufen, dann effekt2?
Computrius
1
@computrius Ja ,React will apply every effect used by the component, in the order they were specified.
August Janse vor