SWR — React Hooks for Data Fetching by Vercel

What it is

SWR is a lightweight React data-fetching library created by Vercel. It implements the stale-while-revalidate caching strategy: return cached (stale) data instantly, then fetch fresh data in the background, and update the UI when the new data arrives. This delivers a responsive user experience with minimal loading states.

SWR targets React and Next.js developers who need to fetch remote data with smart caching, automatic revalidation on focus/reconnect, pagination, and optimistic updates -- all without a heavy state management library.

How it saves time or tokens

Without SWR, managing server state in React requires useEffect + useState boilerplate, manual cache invalidation, loading/error state tracking, and deduplication of concurrent requests. SWR handles all of this in a single hook call. The useSWR hook returns data, error, and isLoading with zero configuration.

How to use

1. Install SWR: npm install swr.
2. Define a fetcher function (e.g., (url) => fetch(url).then(r => r.json())).
3. Use useSWR(key, fetcher) in any component to fetch and cache data.

Example

import useSWR from 'swr';

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

function Profile() {
  const { data, error, isLoading, mutate } = useSWR('/api/user', fetcher);

  if (isLoading) return <span>Loading...</span>;
  if (error) return <span>Failed to load</span>;

  return (
    <div>
      <h1>{data.name}</h1>
      <button onClick={() => mutate()}>Refresh</button>
    </div>
  );
}

Related on TokRepo

• Coding Tools -- Frontend developer libraries
• Automation Tools -- Build and development tools

Common pitfalls

• Not wrapping the app in SWRConfig for global configuration. Without it, you repeat fetcher and options in every useSWR call.
• Using SWR for client-side-only data that does not need server revalidation. For local UI state, use useState or a state manager instead.
• Forgetting that SWR deduplicates requests by key. If two components use the same key, only one fetch fires. This is a feature, but can confuse when debugging.