Několik stavových proměnných

Komponenta může mít tolik stavových proměnných, kolik potřebuje: pro každou zavolejte useState jednou. Nemusí to být čísla. Tady je hlasování, které si pamatuje počet a text:

const [hlasy, setHlasy] = useState(0);
const [posledniHlas, setPosledniHlas] = useState("zatím nikdo");

function hlasuj(nazev) {
    setHlasy(hlasy + 1);
    setPosledniHlas(nazev);
}

return (
    <main>
        <p>Počet hlasů: {hlasy}</p>
        <p>Poslední hlas: {posledniHlas}</p>
        <button onClick={() => hlasuj("Noční vlaky")}>Noční vlaky</button>
        <button onClick={() => hlasuj("Měsíční kočky")}>Měsíční kočky</button>
    </main>
);

Po kliknutí na Měsíční kočky ukáže stránka Počet hlasů: 1 a Poslední hlas: Měsíční kočky. Jedna obsluha změnila dvě stavové proměnné. React nevykresluje po každé funkci set…: počká, až obsluha skončí, a pak vykreslí jednou, s oběma novými hodnotami.

Každá stavová proměnná je samostatná. setHlasy() změní jen hlasy a posledniHlas zůstane, jak je. React je od sebe rozezná podle pořadí, v jakém komponenta volá useState, a proto patří hooky vždycky nahoru do komponenty a volají se pokaždé ve stejném pořadí.

Ne všechno, co stránka ukazuje, potřebuje vlastní stav. Když se hodnota dá spočítat ze stavu, který už máte, spočítejte ji při vykreslování:

const zbyvaHlasu = 5 - hlasy;

S <p>Zbývá hlasů: {zbyvaHlasu}</p> ukazuje stránka vždycky správné číslo, protože se zbyvaHlasu spočítá znovu při každém vykreslení. Třetí stavová proměnná by byla jen další věc, kterou je potřeba udržovat v souladu s ostatními, a další místo pro chybu.