Wenn der Tag wechselt

Das Programm ist gewachsen, und der Server hat jetzt für jeden Tag eine Datei: freitag.json und samstag.json. Die App zeigt einen Tag nach dem anderen, und die Buttons wählen, welchen. Der gewählte Tag steht im State, am Anfang "freitag":

const [tag, setTag] = useState("freitag");

Der Effekt soll die Datei des gewählten Tages laden, `${tag}.json`. Aber er hat noch die Abhängigkeiten [], läuft also nur einmal, am Anfang. Nach einem Klick auf Samstag ist tag gleich "samstag", aber der Effekt läuft nicht noch einmal, und die Seite zeigt weiter den Freitag.

Sobald der Effekt tag verwendet, gehört tag in seine Abhängigkeiten:

useEffect(() => {
    async function bandsLaden() {
        const antwort = await fetch(`${tag}.json`);
        // Der Rest bleibt, wie er war.
    }
    bandsLaden();
}, [tag]);

Jetzt führt React den Effekt nach dem ersten Render aus, wenn tag gleich "freitag" ist, und danach nach jedem Render, in dem sich tag geändert hat. Ein Klick auf Samstag ändert den State, React rendert die Seite noch einmal, noch mit den Bands vom Freitag, und führt dann den Effekt aus, der samstag.json lädt. Ein zweiter Klick auf Samstag ändert tag nicht, also wird nichts neu geladen.

Dafür sind Abhängigkeiten da: Ein Effekt läuft genau dann wieder, wenn sich etwas geändert hat, wovon er abhängt. Du kannst dir das Array als die Liste der Werte vorstellen, bei deren Änderung die Arbeit des Effekts veraltet ist.