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