Dein erster State

Am Ende der letzten Lektion hat sich die Seite nicht verändert: React wusste nicht, dass sich likes geändert hatte, und bei jedem Rendern würde die Variable wieder bei 0 anfangen. Das löst State, ein Wert, den React für die Komponente aufbewahrt. Du erzeugst ihn mit useState:

import { useState } from "react";

export default function App() {
    const [likes, setLikes] = useState(0);

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

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

Jetzt zählt jeder Klick 1 dazu, und die Seite zeigt es an. Zeile für Zeile:

• useState ist eine Funktion von React. Importiere sie oben in der Datei in geschweiften Klammern, so wie du benannte Exporte importierst.
• useState(0) gibt der Komponente einen State, der bei 0 beginnt. Die Funktion gibt ein Array mit zwei Dingen zurück, das du in Konstanten zerlegst: likes, der aktuelle Wert, und setLikes, die Funktion, die ihn ändert. Die Namen wählst du selbst. Üblich ist etwas und setEtwas.
• setLikes(likes + 1) teilt React den neuen Wert mit. React rendert die Komponente dann erneut: Es ruft App() noch einmal auf, und diesmal gibt useState(0) den Wert 1 zurück, denn der Startwert wird nur beim ersten Mal verwendet. Das JSX enthält jetzt ♥ 1, und React ändert den Absatz auf der Seite entsprechend.

Die Reihenfolge ist also immer gleich: ein Ereignis, ein Handler, der einen Setter aufruft, ein neues Rendern mit dem neuen Wert und eine Seite, die ihn zeigt. Die Seite änderst du nie selbst.

Funktionen von React, deren Name mit use beginnt, wie useState, heißen Hooks. Rufe sie ganz oben in der Komponente auf, vor allem anderen, und nie innerhalb eines if, einer Schleife oder eines Handlers. Im Lauf des Kurses lernst du weitere Hooks kennen.

Typische Fehler:

• likes = likes + 1 oder likes++ im Handler. likes ist eine Konstante, deshalb meldet die Konsole TypeError: Assignment to constant variable. Und selbst wenn sie keine wäre, würde React nichts merken. Nur der Setter ändert State.
• Kein import von useState. Die Seite bleibt leer, und die Konsole meldet ReferenceError: useState is not defined.