Remote Data Fetching w/SWR

Build a fast and reactive UI

When React Hooks rolled out the other year, it was a big step towards making reactive user interfaces (UIs) and experiences easier. By using hooks, developers can separate logic and concerns a bit further and move more toward functional programming.

The team over at Next.js recently created a custom hook dubbed, useSWR, which stands for stale-while-revalidate. In the docs, SWR updates components continuously and automatically. UIs will always be responsive and fast.

How to use the SWR hook

I've already used SWR in a project for user authentication and synchronizing a dashboard with an API data source. The team behind useSWR has created documentation that makes learning to use it relatively easy. Here is a contrived, yet common example of getting started:

import useSWR from 'swr';
import { Container, Paragraph } from '@/components/system';
function Dashboard() {
  const { data: user, error: userError } = useSWR('/api/user', fetcher);
  const { data: dashboard, error: dashboardError } = useSWR(
    '/api/dashboard',
    fetcher
  );
  if (userError || dashboardError) return <Container>failed to load</Container>;
  if (!user && !dashboard) return <Container>loading...</Container>;
  return (
    <Container>
      <Paragraph>Hey there {user.name}!</Paragraph>
    </Container>
    //... render dashboard data
  );
}

Unpacking the sample code

Let's dig into our example code a bit.

• We have two useSWR hook instances, each returning two values: data and error
• The data will be undefined when the request (fetcher) has not yet completed
• When we get a response, it sets data and error based on the result of the fetcher and re-renders the component
• The fetcher can be any asynchronous function, so you can use your favorite data-fetching library to handle that part, like fetch or axios
• Once we have actual data, we can render it with our Dasboard component(s)

And, voilà! We have a UI that is fast and efficient using the useSWR hook.

Learn more about useSWR at https://swr.now.sh.