Wann ein Effekt läuft

Ein Effekt, dem du nur eine Funktion gibst, läuft nach jedem Render, auch nach einem, der nichts mit ihm zu tun hatte. In dieser Übung hat die App außerdem ein Textfeld für den Namen auf deinem Ticket. Jede Taste, die du tippst, ändert den State, React rendert neu, und der Effekt setzt den Titel erneut, obwohl sich die Likes nicht geändert haben. Bei einem Titel ist das nur ein bisschen unnötige Arbeit. Aber ein Effekt, der Daten lädt oder einen Timer startet, darf nicht bei jeder Taste laufen.

Darum nimmt useEffect ein zweites Argument: ein Array mit Abhängigkeiten, den Werten, von denen der Effekt abhängt. Nach jedem Render vergleicht React sie mit ihren Werten im vorigen Render und führt den Effekt nur aus, wenn sich einer geändert hat:

useEffect(() => {
    console.log("Nach jedem Render");
});

useEffect(() => {
    console.log("Einmal, wenn die Komponente erscheint");
}, []);

useEffect(() => {
    console.log("Am Anfang und immer, wenn sich likes ändert");
}, [likes]);

• Ohne das Array läuft der Effekt nach jedem Render.
• Mit einem leeren Array, [], gibt es nichts, was sich ändern könnte, also läuft er nur nach dem ersten Render, wenn die Komponente auf der Seite erscheint.
• Mit [likes] läuft er nach dem ersten Render und danach nach jedem Render, in dem sich likes geändert hat. Mit [likes, name], wenn sich eines von beiden ändert.

Welche Abhängigkeiten braucht ein Effekt? Jede State-Variable und jede Prop, die er verwendet. Ein Effekt, der den Titel aus likes setzt, hat die Abhängigkeiten [likes]. Lässt du eine weg, läuft der Effekt nicht, wenn sich dieser Wert ändert, und die Seite zeigt weiter einen alten Wert.