Tutorials › React Modern Development › SWR Data Fetching

SWR Data Fetching

5 min read

SWR fetches with stale-while-revalidate strategy: return cached data instantly, then update from server in the background. const {data, error, isLoading} = useSWR('/api/user', fetcher) is all you need.

SWR — Stale While Revalidate

npm install swr

import useSWR from "swr";

const fetcher = url => fetch(url).then(r => r.json());

function Profile() {
  const { data, error, isLoading } = useSWR(
    "/api/profile", fetcher,
    { refreshInterval: 30000 }  // auto-refresh every 30s
  );

  if (isLoading) return ;
  if (error)   return ;
  return {data.name};
}

← React File Structure Next: React Interview Prep →

Quick Access

SWR Data Fetching

SWR — Stale While Revalidate

{data.name}