Zusammenfassung

In dieser Lektion hast du gelernt, dass:

• ein Effekt Code ist, den React ausführt, nachdem es eine Komponente gerendert hat, für Dinge außerhalb von React: den Titel des Tabs, Timer, das Laden von Daten, localStorage. Du schreibst ihn mit useEffect(() => { ... }, [Abhängigkeiten]), das wie useState aus "react" importiert wird.
• die Abhängigkeiten sagen, wann der Effekt läuft: ohne das Array nach jedem Render, mit [] einmal, wenn die Komponente erscheint, mit [tag] am Anfang und immer, wenn sich tag ändert. Jede State-Variable und Prop, die der Effekt verwendet, gehört hinein.
• die Funktion, die ein Effekt zurückgibt, sein Cleanup ist. React ruft sie auf, wenn die Komponente verschwindet, und bevor es den Effekt noch einmal ausführt. Ein Intervall braucht eines: return () => clearInterval(id);, eine Funktion, nicht das sofort aufgerufene clearInterval(id).
• ein Intervall, das im ersten Render entsteht, die Werte dieses Renders behält und den State darum mit der Updater-Funktion ändert: setSekunden((sekunden) => sekunden + 1).
• Daten in einem Effekt geladen werden, mit einer async-Funktion darin, die der Effekt aufruft. Die Daten, laedt und fehler im State sagen der Seite, was sie zeigen soll, und antwort.ok sagt, ob der Server die Datei geschickt hat.
• du dir State merkst, indem du ihn in einem Effekt speicherst, der von ihm abhängt, und ihn mit einer Funktion liest, die du useState gibst und die React nur für den ersten Render aufruft.

In der nächsten Lektion, Checkpoint: Stoppuhr, baust du eine Stoppuhr, deren Intervall in einem Effekt läuft: Sie startet, hält an, geht auf null zurück und misst Runden.

Aber zuerst noch etwas Übung: das Programm mit einer Auswahl der Bühne, das die Bands aus einer Datei lädt und sich die gewählte Bühne merkt.