Aktualizační funkce

Co když obsluha zavolá funkci set… několikrát? Superlajk má přidat 3 lajky:

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

Přidá ale jen jeden. Proč, víte z minulého cvičení: lajky se během obsluhy nemění. Když jsou lajky rovny 0, obsluha třikrát řekne „nová hodnota je 1“ a React vykreslí jedničku.

Když se nová hodnota počítá ze staré, předejte funkci set… místo hodnoty funkci:

function pridejSuperlajk() {
    setLajky((lajky) => lajky + 1);
    setLajky((lajky) => lajky + 1);
    setLajky((lajky) => lajky + 1);
}

Takové funkci se říká aktualizační funkce. React ji nezavolá hned. Zařadí ji do fronty a při dalším vykreslení zavolá funkce z fronty popořadě. Každé předá hodnotu, kterou vrátila ta před ní: z 0 je 1, z 1 jsou 2 a ze 2 jsou 3. Stránka ukáže ♥ 3.

Parametr se tu jmenuje stejně jako stav, ale uvnitř šipkové funkce znamená lajky ten parametr: nejnovější hodnotu, ne tu z fotky vykreslení. Můžete ho pojmenovat i jinak, (predchozi) => predchozi + 1 funguje úplně stejně.

Kdy ji potřebujete? Pevná hodnota, třeba setLajky(0), na té staré nezávisí, takže předejte hodnotu. Když nová hodnota vzniká ze staré, často funguje i setLajky(lajky + 1), ale jen dokud tentýž stav v téže obsluze nemění nic dalšího. Aktualizační funkce funguje vždycky a funguje dál, i když obsluha poroste. Tento kurz ji proto od teď používá pokaždé, když se nová hodnota počítá ze staré.