When the Day Changes

The lineup has grown, and the server now has one file for each day: friday.json and saturday.json. The app shows one day at a time, and the buttons choose which. The chosen day is in state, "friday" at first:

const [day, setDay] = useState("friday");

The effect should load the chosen day's file, `${day}.json`. But it still has the dependencies [], so it runs only once, at the start. After a click on Saturday, day is "saturday", but the effect doesn't run again, and the page keeps showing Friday.

Once the effect uses day, day belongs in its dependencies:

useEffect(() => {
    async function loadBands() {
        const response = await fetch(`${day}.json`);
        // The rest stays as it was.
    }
    loadBands();
}, [day]);

Now React runs the effect after the first render, when day is "friday", and then after every render in which day has changed. A click on Saturday changes the state, React renders the page again, still with Friday's bands, and then runs the effect, which loads saturday.json. A second click on Saturday doesn't change day, so nothing is loaded again.

That's what dependencies are for: an effect runs again exactly when something it depends on has changed. You can think of the array as the list of values that, when they change, make the effect's work out of date.