swr

Use when fetching and caching remote data in React with SWR — useSWR, mutations with optimistic updates, pagination, infinite loading, or automatic revalidation. Also use when choosing between SWR and TanStack Query, or when integrating SWR with Next.js.

Model	Source
sonnet	pack: state

Full Reference

┏━ 🔧 swr ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ Use when fetching and caching remote data in R… ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

SWR

React data fetching library built on the stale-while-revalidate caching strategy. Returns cached data immediately, then revalidates in the background. From Vercel.

Install: npm install swr — v2.x, React 16.8+

Quick Reference

Item	Value
Package	swr v2.x
React requirement	16.8+
Bundle size	~4KB
Provider required	No — zero config
Deduplication	Automatic — same key = one request
Infinite scroll hook	useSWRInfinite from swr/infinite
Explicit mutation hook	useSWRMutation from swr/mutation
Global mutate	useSWRConfig().mutate inside components

Reference Index

I want to…	File
Set up useSWR, configure global options, use conditional fetching	reference/core-pattern.md
Do optimistic updates, use useSWRMutation, invalidate cache	reference/mutations.md
Build paginated lists or infinite scroll feeds	reference/pagination-and-infinite.md
Handle errors, retry logic, Next.js SSR, or compare SWR vs TanStack Query	reference/error-handling-and-nextjs.md

Usage: Read the reference file matching your current task from the index above. Each file is self-contained with code examples and inline gotchas.

Related Skills

• tanstack-query — More feature-rich alternative; better for complex apps
• nextjs — App Router SSR patterns work differently with SWR
• react-hook-form — Forms that submit via useSWRMutation
• vercel-ai-sdk — Streaming AI responses (different pattern — not SWR)