Use SWR for Automatic Deduplication

Name: Use SWR for Automatic Deduplication
Author: Vercel Engineering

clientswrdeduplicationdata-fetching

⭐ 28.0k🕒 2026-06-10Source ↗

Install this skill

npx skills add vercel-labs/agent-skills

Works across Claude Code, Cursor, Codex, Copilot & Antigravity

SWR (stale-while-revalidate) optimizes client-side network activity by managing data fetching states through an integrated cache. By using a unique resource identifier as a key, the library ensures that multiple components requesting the same data simultaneously trigger only a single network request. This eliminates redundant traffic and ensures UI consistency across separate UI modules. When a component mounts, SWR returns cached data immediately while checking the server for updates in the background. It handles conditional fetching, window focus revalidation, and automatic polling cycles without requiring manual state management or local variables. By standardizing the communication between the UI and the API, it prevents race conditions during rapid component rendering and minimizes latency for the end user, ensuring the data presented remains as current as possible without blocking the main execution thread.

When to Use This Skill

•Fetching frequently accessed dashboard metadata
•Synchronizing user profile details across multiple header and sidebar widgets
•Implementing real-time polling for notification counts
•Handling dynamic search queries with debouncing and caching

How to Invoke This Skill

Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:

“Reduce duplicate API calls for the same data
“Implement client-side caching for my API fetch requests
“Use SWR to stop multiple components from fetching the same user data
“Handle background data revalidation after window focus
“Improve UI responsiveness with stale-while-revalidate patterns

What this skill does

•Automatic request deduplication for identical resource keys
•Stale-while-revalidate caching strategy for immediate data display
•Background revalidation upon window focus or network recovery
•Integrated state management for loading, error, and data objects
•Declarative mutation support for updating remote resources

When not to use it

✕When handling extremely large binary files or streaming media
✕When strictly required to disable caching for security-sensitive real-time data
✕In simple applications that do not require state persistence or client-side caching

Example workflow

Define a centralized fetcher function to parse API responses
Wrap components requiring shared data with the useSWR hook
Supply the API endpoint as the primary cache key
Destructure the returned data, isLoading, and error objects
Bind the resulting data to the component view
Invoke useSWRMutation to update remote state and sync the cache

Prerequisites

–A working React environment
–A consistent API endpoint structure
–An asynchronous fetcher function

Pitfalls & limitations

!Omitting the fetcher function leads to runtime errors
!Using non-serializable objects as cache keys breaks the memoization
!Forgetting to invalidate caches during specific write operations can result in stale UI

FAQ

How does SWR handle deduplication?

It maps every request to a unique key; if multiple components request the same key at the same time, SWR combines them into a single flight request.

Can I disable automatic revalidation?

Yes, you can configure options like revalidateOnFocus or revalidateIfStale to false within the SWR configuration object.

Is SWR only for GET requests?

While primarily for data fetching, the useSWRMutation hook provides an official way to handle POST, PUT, or DELETE requests.

What happens if my API returns an error?

SWR captures the error in the returned object, allowing you to trigger error boundaries or display error states in your UI.

How it compares

Manual fetching requires complex useEffect hooks and local state management for every instance, whereas SWR centralizes this logic into a single hook that handles the full request lifecycle.

Source & trust

⭐ 28k stars🕒 Updated 2026-06-10

View original skill on GitHub →

📄 Full skill instructions — original source: vercel-labs/agent-skills

## Use SWR for Automatic Deduplication

SWR enables request deduplication, caching, and revalidation across component instances.

**Incorrect (no deduplication, each instance fetches):**

function UserList() {
  const [users, setUsers] = useState([])
  useEffect(() => {
    fetch('/api/users')
      .then(r => r.json())
      .then(setUsers)
  }, [])
}

**Correct (multiple instances share one request):**

import useSWR from 'swr'

function UserList() {
  const { data: users } = useSWR('/api/users', fetcher)
}

**For immutable data:**

import { useImmutableSWR } from '@/lib/swr'

function StaticContent() {
  const { data } = useImmutableSWR('/api/config', fetcher)
}

**For mutations:**

import { useSWRMutation } from 'swr/mutation'

function UpdateButton() {
  const { trigger } = useSWRMutation('/api/user', updateUser)
  return <button onClick={() => trigger()}>Update</button>
}

Reference: [https://swr.vercel.app](https://swr.vercel.app)

By Vercel Engineering

How to Use This Skill Unit

Option A: Project-Specific (Recommended)

Click "Download" above
In your project, create the directory: .agent/skills/client-swr-dedup/
Save the file as SKILL.md
The agent will automatically discover the skill based on its description.

Option B: Global Installation (All Agents)

Save the file to these locations to make it available across all projects:

Claude Code: ~/.claude/skills/vercel-labs/agent-skills/client-swr-dedup/SKILL.md
Cursor: ~/.cursor/skills/vercel-labs/agent-skills/client-swr-dedup/SKILL.md
Antigravity: ~/.gemini/antigravity/skills/vercel-labs/agent-skills/client-swr-dedup/SKILL.md