Wenn sich State ändert

Hier ein Handler, der den State ändert und ihn dann ausgibt:

function likeGeben() {
    setLikes(likes + 1);
    console.log(likes);
}

Nach dem ersten Klick zeigt die Seite ♥ 1, aber die Konsole gibt 0 aus. Nach dem zweiten Klick zeigt die Seite ♥ 2, und die Konsole gibt 1 aus. Die Konsole hängt immer einen Schritt hinterher. Ist setLikes() langsam?

Nein: Die Funktion ändert likes überhaupt nicht. Das kann sie auch nicht, denn likes ist eine Konstante dieses Renderns. setLikes(1) teilt React nur mit, dass likes ab jetzt 1 sein soll, und React rendert die Komponente erneut, sobald der Handler fertig ist. Dieser neue Aufruf von App() hat eine neue Konstante likes, die 1 ist. Der Handler, der gerade läuft, gehört aber zum alten Rendern, in dem likes 0 ist, und für diesen Handler bleibt es bis zum Ende 0.

Stell dir jedes Rendern als Schnappschuss vor. Das JSX, die Handler und die State-Werte darin stammen alle aus einem Moment, und nichts in einem Schnappschuss ändert sich. Ein Setter-Aufruf bittet React um einen neuen Schnappschuss.

Braucht der Handler den neuen Wert, berechne ihn zuerst, speichere ihn in einer Konstante und verwende ihn für beides:

function likeGeben() {
    const neueLikes = likes + 1;
    setLikes(neueLikes);
    console.log(neueLikes);
}

Jetzt gibt die Konsole zusammen mit ♥ 1 auch 1 aus. Dasselbe gilt für Bedingungen: if (likes === 10) direkt nach setLikes(likes + 1) prüft den alten Wert und ist deshalb einen Klick später wahr, als du erwartest. Prüfe stattdessen neueLikes.