Die Updater-Funktion

Was, wenn ein Handler den Setter mehrmals aufruft? Ein Super-Like soll 3 Likes dazugeben:

function superLikeGeben() {
    setLikes(likes + 1);
    setLikes(likes + 1);
    setLikes(likes + 1);
}

Aber es kommt nur 1 dazu. Den Grund kennst du aus der letzten Übung: likes ändert sich während des Handlers nicht. Bei likes gleich 0 sagt der Handler dreimal „der neue Wert ist 1“, und React rendert mit 1.

Wird der neue Wert aus dem alten berechnet, gib dem Setter statt eines Werts eine Funktion:

function superLikeGeben() {
    setLikes((likes) => likes + 1);
    setLikes((likes) => likes + 1);
    setLikes((likes) => likes + 1);
}

Eine solche Funktion heißt Updater-Funktion. React legt sie in eine Warteschlange und ruft die Funktionen beim nächsten Rendern der Reihe nach auf. Jede bekommt den Wert, den die davor zurückgegeben hat: Aus 0 wird 1, aus 1 wird 2 und aus 2 wird 3. Die Seite zeigt ♥ 3.

Der Parameter heißt hier wie der State, aber innerhalb der Pfeilfunktion ist likes der Parameter: der aktuellste Wert, nicht der aus dem Schnappschuss. Du kannst ihn anders nennen, (vorher) => vorher + 1 funktioniert genauso.

Wann brauchst du sie? Ein fester Wert wie setLikes(0) hängt nicht vom alten ab, also gib den Wert. Wird der neue Wert aus dem alten gebildet, funktioniert oft auch setLikes(likes + 1), aber nur, solange nichts anderes im selben Handler diesen State ändert. Die Updater-Funktion funktioniert immer und bleibt richtig, wenn der Handler wächst. Deshalb verwendet dieser Kurs sie ab jetzt immer, wenn der neue Wert aus dem alten berechnet wird.