Mit useEffect führen wir Code aus, nachdem die Komponenten gerendert, also im DOM erzeugt wurden.
useEffect( () => doStuff() ); // erwartet eine Funktion
useEffect( () => doStuff(), [] ); //2 Parameter optional übergibt Dependencies
Wird der 2 Parameter übergeben, kann damit gesteuert werden, wann die Funktion ausgeführt wird. Andernfalls wird die Funktion bei jedem rendern ausgeführt!!!
Das ist bei Schnittstellenanfragen natürlich nicht immer gewünscht, jedes mal alle Daten anzufragen.Mit dem 2ten Parameter den Dependencies, kann man das steuern.
useEffect Hook
- asynchrone Ausführung, d.h. Anwendung wird nicht blockiert
- Code wird nach rendern der Komponente ausgeführt
- kein Rückgabewert
- über Seiteneffekte arbeiten ( Übergabe von geänderten Werten an den State), der dann ein Neurendern der Komponenten auslöst
- geeignet für
- langlaufende Berechnungen
- Schnittstellenkommunikation (bspw. REST)
- PUB-SUB-PATTERN
- Dependies (Abhängikeiten), nur bei Änderung der Abhängikeiten wird useEffect ausgelöst
- intital sind alle Abhängikeiten „neu“, d.h. es werden alle useEffect ausgelöst
3 Möglichkeiten Abhängkeiten zu übergeben
- ohne Parameter – Ausführung erfolgt bei jedem rendern
useEffect( () => doStuff()); - leere Liste (leeres Array) – Ausführung erfolgt nur initial
useEffect( () => doStuff(), [] ); - mit 1 oder mehrerer Abhängikeiten – Ausführung nur bei Änderung mindestens 1 Abhängikeit
useEffect( () => doStuff(), [count] );