Fetching on Mount

In the previous lesson, we saw how to make a network request in response to an event, like a form submission. But what if we need to fetch data to populate the initial view?

For example, let's suppose we're building a weather app. We want to show the user what the current temperature is in their area:

We want to show the temperature immediately, right when the component mounts.

This is a surprisingly thorny problem. It might seem like a slight difference, fetching on mount instead of fetching on event, but it opens a whole can of worms.

First, the ergonomics are tricky. In order to fetch on mount, we'd generally use the useEffect hook, but there are some gotchas around using async/await in an effect (covered in an upcoming lesson).

And also, if we want to solve this problem in a robust, production-ready way, there are all sorts of concerns we need to worry about, including:

• Caching the response so that it can be reused by multiple components across the app.
• Revalidating the data so that it never becomes too stale.

This is a rabbit hole we could get lost in for days. 😬

As a result, it's become standard in the community to use a tool to help with this stuff. The React docs,

*

for example, suggest using a package like React Query or SWR. In fact, on this course platform, I use SWR to solve all of these hard problems for me!

Let's see how it works.

Here's an MVP? implementation. Feel free to poke and prod at it. We'll go over how it works below.

Let's dig into this code:

import useSWR from 'swr';

const { data, error } = useSWR(ENDPOINT, fetcher);

async function fetcher(endpoint) {
  const response = await fetch(endpoint);
  const json = await response.json();

  return json;
}

{
  "ok": true,
  "temperature": -19
}

Our MVP above doesn't include loading or error states. Let's see how to implement them with SWR.

In addition to providing a data value, the useSWR hook also tells us whether or not the request is currently loading. We can pluck out the isLoading key:

const { data, isLoading } = useSWR(ENDPOINT, fetcher);

isLoading is a boolean value. The initial value is true, and it flips to false once the fetch request has completed.

We can use that value to conditionally render a loading UI like this:

function App() {
  const { data, isLoading } = useSWR(ENDPOINT, fetcher);

  if (isLoading) {
    return (
      <p>Loading…</p>
    );
  }

  return (
    <p>
      Current temperature:
      {typeof data.temperature === 'number' && (
        <span className="temperature">
          {data.temperature}°C
        </span>
      )}
    </p>
  );
}

To simulate an error, we can add a query parameter to the ENDPOINT:

const ENDPOINT =
  'https://jor-test-api.vercel.app/api/get-temperature?simulatedError=true';

This will cause the server to return a 500 status code 👀, instead of 200. It will also return the following JSON:

{
  "error": "This request returns an error, because the “simulatedError” query parameter was specified."
}

With SWR, however, neither of these things is sufficient to mark this as an error.

Remember: we manage the network request! Our fetcher function is responsible for retrieving the data, and passing it along to SWR. If we want this to count as an error, we need to throw it:

async function fetcher(endpoint) {
  const response = await fetch(endpoint);
  const json = await response.json();

  if (!json.ok) {
    throw json;
  }

  return json;
}

With this change done, data will be undefined, and error will be the object we got back from the server.

Here's the final implementation, with loading and error states: