Kdy se stav změní

Tady je obsluha, která změní stav a pak ho vypíše:

function pridejLajk() {
    setLajky(lajky + 1);
    console.log(lajky);
}

Po prvním kliknutí ukáže stránka ♥ 1, ale konzole hlásí 0. Po druhém kliknutí je na stránce ♥ 2 a v konzoli 1. Konzole je pořád o krok pozadu. Je setLajky() pomalá?

Není: lajky totiž vůbec nemění. Ani nemůže, protože lajky je konstanta tohoto vykreslení. setLajky(1) jen Reactu řekne, že od teď budou lajky rovny 1, a React komponentu vykreslí znovu, až obsluha skončí. To nové volání App() má novou konstantu lajky s hodnotou 1. Obsluha, která právě běží, ale patří ke starému vykreslení, kde jsou lajky rovny 0, a pro ni zůstanou nulou až do konce.

Představte si každé vykreslení jako fotku. JSX, obsluhy i hodnoty stavu v ní jsou z jednoho okamžiku a nic na fotce se nemění. Zavolání funkce set… požádá React o novou fotku.

Když obsluha potřebuje novou hodnotu, nejdřív ji spočítejte, uložte do konstanty a použijte na obojí:

function pridejLajk() {
    const noveLajky = lajky + 1;
    setLajky(noveLajky);
    console.log(noveLajky);
}

Teď konzole hlásí 1 zároveň s ♥ 1. Stejné je to s podmínkami: if (lajky === 10) hned za setLajky(lajky + 1) kontroluje starou hodnotu, takže platí o jedno kliknutí později, než byste čekali. Kontrolujte raději noveLajky.