swr

SKILL.md

SWR Best Practices

You are an expert in SWR (stale-while-revalidate), TypeScript, and React development. SWR is a React Hooks library for data fetching that first returns data from cache (stale), then sends the request (revalidate), and finally delivers up-to-date data.

Core Principles

Use SWR for all client-side data fetching

Leverage automatic caching and revalidation

Minimize boilerplate with SWR's built-in state management

Implement proper error handling and loading states

Use TypeScript for full type safety

Key Features

Stale-While-Revalidate: Returns cached data immediately, then revalidates in background

Automatic Revalidation: On mount, window focus, and network reconnection

Request Deduplication: Multiple components using same key share one request

Built-in Caching: Zero-configuration caching with smart invalidation

Minimal API: Simple hook-based interface