Mehrere State-Variablen

Eine Komponente kann so viele State-Variablen haben, wie sie braucht: Rufe useState einfach für jede einmal auf. Es müssen auch keine Zahlen sein. Hier eine Abstimmung, die eine Anzahl und einen Text speichert:

const [stimmen, setStimmen] = useState(0);
const [letzteStimme, setLetzteStimme] = useState("noch niemand");

function abstimmen(name) {
    setStimmen(stimmen + 1);
    setLetzteStimme(name);
}

return (
    <main>
        <p>Stimmen: {stimmen}</p>
        <p>Letzte Stimme: {letzteStimme}</p>
        <button onClick={() => abstimmen("Nachtzüge")}>Nachtzüge</button>
        <button onClick={() => abstimmen("Mondkatzen")}>Mondkatzen</button>
    </main>
);

Nach einem Klick auf Mondkatzen zeigt die Seite Stimmen: 1 und Letzte Stimme: Mondkatzen. Ein Handler hat zwei State-Variablen geändert. React rendert nicht nach jedem Setter: Es wartet, bis der Handler fertig ist, und rendert dann einmal, mit beiden neuen Werten.

Jede State-Variable ist eigenständig. setStimmen() ändert nur stimmen, und letzteStimme bleibt, wie sie ist. React unterscheidet sie an der Reihenfolge, in der die Komponente useState aufruft. Deshalb stehen Hooks immer oben in der Komponente und werden bei jedem Rendern in derselben Reihenfolge aufgerufen.

Nicht alles, was die Seite zeigt, braucht einen eigenen State. Lässt sich ein Wert aus dem vorhandenen State berechnen, berechne ihn beim Rendern:

const uebrig = 5 - stimmen;

Mit <p>Übrige Stimmen: {uebrig}</p> zeigt die Seite immer die richtige Zahl, denn uebrig wird bei jedem Rendern neu berechnet. Ein dritter State dafür wäre nur eine Sache mehr, die du mit den anderen abgleichen müsstest, und eine Stelle mehr für Fehler.