Eine Variable genügt nicht

Bisher haben die Handler nur etwas ausgegeben. Jetzt soll ein Klick die Seite ändern: ein Like-Button, der Likes zählt. Mit dem, was du kennst, würdest du die Zahl in einer Variablen halten und sie im Handler erhöhen:

export default function App() {
    let likes = 0;

    function handleLike() {
        likes = likes + 1;
        console.log(likes);
    }

    return (
        <main>
            <h1>Eulenchor</h1>
            <p>♥ {likes}</p>
            <button onClick={handleLike}>Like</button>
        </main>
    );
}

Klicke dreimal, und die Konsole zählt:

1
2
3

Die Seite zeigt aber immer noch ♥ 0. Warum? React hat die Komponente einmal gerendert: Es hat App() aufgerufen, die Funktion hat JSX zurückgegeben, in dem likes den Wert 0 hatte, und React hat daraus die Seite gemacht. Dann hat sich die Variable geändert, aber niemand hat es React gesagt. React beobachtet deine Variablen nicht, und die Seite ändert sich nicht von selbst. Im JavaScript-Kurs hättest du jetzt selbst textContent gesetzt. In React fasst du die Seite nicht an: React macht sie aus den Komponenten.

Und selbst wenn React App() noch einmal aufriefe, würde es nichts helfen. Die Funktion liefe von oben an, und let likes = 0; würde wieder eine neue Variable mit 0 anlegen. Eine Variable in einer Komponente lebt nur, solange die Funktion läuft, für ein Rendern.

Die Komponente braucht also zwei Dinge, die eine Variable nicht liefern kann:

• einen Wert, den React von einem Rendern zum nächsten aufbewahrt,
• und einen Weg, React zu sagen, dass sich der Wert geändert hat, damit es die Komponente erneut rendert.

Das ist State, und er kommt in der nächsten Lektion. Probiere das Problem zuerst selbst aus.