Váš první stav

Na konci minulé lekce se stránka neměnila: React nevěděl, že se lajky změnily, a každé vykreslení by je stejně začalo znovu od nuly. Pomůže stav, hodnota, kterou si React pro komponentu pamatuje. Vytvoříte ho pomocí useState:

import { useState } from "react";

export default function App() {
    const [lajky, setLajky] = useState(0);

    function pridejLajk() {
        setLajky(lajky + 1);
    }

    return (
        <main>
            <h1>Sový sbor</h1>
            <p>♥ {lajky}</p>
            <button onClick={pridejLajk}>Líbí se mi</button>
        </main>
    );
}

Teď každé kliknutí přičte 1 a stránka to ukáže. Projděme to řádek po řádku:

• useState je funkce Reactu. Naimportujte ji nahoře v souboru, ve složených závorkách, jako se importují pojmenované exporty.
• useState(0) dá komponentě stav, který začíná na nule. Vrátí pole dvou věcí, které rozložíte do konstant: lajky, současnou hodnotu, a setLajky, funkci, která ji mění. Názvy si vybíráte sami. Obvykle se jmenují neco a setNeco.
• setLajky(lajky + 1) řekne Reactu novou hodnotu. React pak komponentu znovu vykreslí: ještě jednou zavolá App() a tentokrát useState(0) vrátí 1, protože počáteční hodnotu použije jen poprvé. V JSX je teď ♥ 1 a React podle toho změní odstavec na stránce.

Pořadí je tedy vždycky stejné: událost, obsluha, která zavolá funkci set…, nové vykreslení s novou hodnotou a stránka, která ji ukáže. Stránku nikdy neměníte sami.

Funkcím Reactu, jejichž název začíná use, jako useState, se říká hooky. Volejte je nahoře v komponentě, před vším ostatním, a nikdy uvnitř if, cyklu nebo obsluhy. Další hooky poznáte dál v kurzu.

Typické chyby:

• lajky = lajky + 1 nebo lajky++ v obsluze. lajky je konstanta, takže konzole hlásí TypeError: Assignment to constant variable. A i kdyby nebyla, React by o změně nevěděl. Stav mění jen jeho funkce set….
• Chybí import funkce useState. Stránka zůstane prázdná a konzole hlásí ReferenceError: useState is not defined.