When I did this in codepen it was fine pretty much unaltered. However, I ported it over to a create react app and the linter complained for the `react-hooks/exhaustive-deps rule and looked something like:

React Hook useEffect has a missing dependency: 'fetchUrl'.
Either include it or remove the dependency array  react-hooks/exhaustive-deps

Besides just eslint disabling this rule, we seem to be able to fix this by moving the fetchUrl method, and url param dependency into the effect.

So, from:

async function fetchUrl() {
  const response = await fetch(url);
  const json = await response.json();
  setData(json);
  setLoading(false);
}
useEffect(() => {
  fetchUrl();
}, []);

to:

useEffect(() => {
  async function fetchUrl() {
    const response = await fetch(url);
    const json = await response.json();
    setData(json);
    setLoading(false);
  }
  fetchUrl();
}, [url]);

or something similar I suppose.

Just a heads up in case it’s helpful to anyone else. Again, thank you for a wonderful tut sir!