Loading the Lineup

Loading data is a job for an effect, too. The app should ask the server for the lineup once, when it appears, so the effect has the dependencies []. The bands are in the file bands.json, and you load them with fetch(), as in the JavaScript course:

useEffect(() => {
    async function loadBands() {
        const response = await fetch("bands.json");
        setBands(await response.json());
    }
    loadBands();
}, []);

Why the function inside? fetch() needs await, and await works only in an async function. But the function you give useEffect can't be async itself: an async function always returns a Promise, and React expects an effect to return nothing or a cleanup. So the effect makes an async function and calls it straight away.

The first render shows an empty list, because bands starts as []. A moment later, the data arrives, setBands() changes the state, and React renders the list with the bands. The effect doesn't run again: its dependencies haven't changed.

While the user waits, the page should say so, and when the server answers with an error, it should say that too. Both are just more state: loading, which is true until the answer comes, and error, with the text of an error message, or "" when there's none. The page shows each of them with &&:

{loading && <p>Loading…</p>}
{error !== "" && <p className="error">{error}</p>}

And remember response.ok from the JavaScript course: it's false when the server answered with an error, such as 404 Not Found for a misspelled file name.

A typical mistake is to call fetch() right in the component, without an effect. Then every render loads the data again, the data changes the state, the new state renders again… and the app asks the server again and again, without end.