Timer und Aufräumen

Effekte sind auch der Ort für Timer. Im JavaScript-Kurs hast du sie mit setInterval() gestartet und mit clearInterval() gestoppt. In React startet ein Effekt sie. Hier ist ein Countdown bis zum Einlass des Festivals:

import { useEffect, useState } from "react";

export default function EinlassCountdown() {
    const [sekundenUebrig, setSekundenUebrig] = useState(60);

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

    return <p>Einlass in {sekundenUebrig} s</p>;
}

Drei Dinge sind hier wichtig:

• Die Abhängigkeiten []. Das Intervall startet einmal, wenn die Komponente erscheint, und läuft dann von allein. Ohne das Array würde der Effekt nach jedem Render wieder laufen, also jede Sekunde, und das Intervall jedes Mal stoppen und neu starten.
• Die Updater-Funktion. Die Funktion des Intervalls wurde im ersten Render gemacht, als sekundenUebrig 60 war, und behält diesen Wert. setSekundenUebrig(sekundenUebrig - 1) würde immer wieder 59 setzen. Die Updater-Funktion bekommt jedes Mal den aktuellen Wert.
• Das Aufräumen. Die Funktion, die der Effekt zurückgibt, ist sein Cleanup (die Aufräumfunktion). React ruft sie auf, wenn die Komponente von der Seite verschwindet, und auch bevor es den Effekt noch einmal ausführt, weil sich eine Abhängigkeit geändert hat. Hier stoppt sie das Intervall.

Warum braucht ein Intervall ein Cleanup? Eine Komponente kann verschwinden, während ihr Intervall noch läuft. In dieser Übung verschwindet der Timer, wenn der Auftritt endet. Ohne das Cleanup weiß das Intervall davon nichts: Es ändert weiter den State einer Komponente, die nicht mehr auf der Seite ist, solange die Seite geöffnet bleibt, und jedes Mal, wenn der Timer wieder gezeigt wird, kommt ein weiteres Intervall dazu.