SWR

Install SWR, wrap your app with SWRConfig, and set global defaults so every useSWR call inherits a shared fetcher and options.

Use the useSWR hook with a key and a fetcher function to declaratively fetch, cache, and revalidate remote data in React components.

Pass null or a falsy value as the key to prevent SWR from fetching. Use this to wait for dependencies, gate requests behind authentication, or chain sequential

Use useSWRMutation for remote mutations (POST, PUT, DELETE) and mutate for local cache updates. Combine both for optimistic UI patterns that update instantly an

Use useSWRInfinite to handle paginated and infinite-scroll data. Define a getKey function that returns the correct URL for each page index, and call setSize to

SWR provides multiple revalidation strategies: on window focus, on interval, on reconnect, and manual. Configure them globally or per-hook to keep data fresh wi

SWR uses an in-memory cache by default. Customize the cache provider for persistent storage, design your key strategy for maximum cache hits, and leverage dedup

SWR catches errors thrown by your fetcher and exposes them via the error return value. Configure automatic retries, error callbacks, and integrate with React Er

Enable the suspense option on useSWR to integrate with React Suspense boundaries. When suspense is active, SWR throws a promise during loading, letting <Suspens

Type your useSWR calls with generics to get full type safety on data, error, keys, and fetcher functions. SWR's TypeScript support enables inference of return t

Fetch data in a Server Component and pass it to a Client Component as fallback data for SWR. This gives you instant server-rendered content with client-side rev

SWR middleware wraps every useSWR call, letting you inject cross-cutting concerns like logging, authentication headers, request timing, or data transformation w