Časovače a úklid

Efekty jsou také místo pro časovače. V kurzu JavaScriptu jste je spouštěli pomocí setInterval() a zastavovali pomocí clearInterval(). V Reactu je spustí efekt. Tady je odpočet do otevření bran festivalu:

import { useEffect, useState } from "react";

export default function OdpocetBran() {
    const [zbyva, setZbyva] = useState(60);

    useEffect(() => {
        const id = setInterval(() => {
            setZbyva((zbyva) => zbyva - 1);
        }, 1000);
        return () => clearInterval(id);
    }, []);

    return <p>Brány se otevřou za {zbyva} s</p>;
}

Důležité jsou tu tři věci:

• Závislosti []. Interval se spustí jednou, když se komponenta objeví, a pak běží sám. Bez pole by se efekt spouštěl po každém vykreslení, tedy každou sekundu, a pokaždé by interval zastavil a spustil znovu.
• Aktualizační funkce. Funkce intervalu vznikla při prvním vykreslení, kdy bylo zbyva 60, a tuhle hodnotu si drží. setZbyva(zbyva - 1) by tak pořád dokola nastavovalo 59. Aktualizační funkce dostane pokaždé aktuální hodnotu.
• Úklid. Funkce, kterou efekt vrátí, je jeho úklid. React ji zavolá, když komponenta ze stránky zmizí, a také předtím, než efekt spustí znovu, protože se změnila některá závislost. Tady interval zastaví.

Proč interval úklid potřebuje? Komponenta může zmizet, zatímco její interval pořád běží. V tomto cvičení časovač zmizí, když koncert skončí. Bez úklidu se to interval nedozví: dál mění stav komponenty, která už na stránce není, a to tak dlouho, dokud je stránka otevřená. A pokaždé, když se časovač znovu ukáže, přidá se k němu další interval.