SWR (library)
A lightweight React data-fetching library based on stale-while-revalidate
SWR is a lightweight React hooks library for data fetching created by Vercel, named after the HTTP caching strategy 'stale-while-revalidate': it immediately returns cached ('stale') data while fetching fresh data in the background, then…
Definition
SWR is a lightweight React hooks library for data fetching created by Vercel, named after the HTTP caching strategy 'stale-while-revalidate': it immediately returns cached ('stale') data while fetching fresh data in the background, then updates the UI once the new data arrives.
Overview
SWR was created by Vercel (the company behind Next.js) to provide a minimal, ergonomic data-fetching primitive for React built directly around the stale-while-revalidate caching pattern defined in HTTP caching standards (RFC 5861). The central hook, `useSWR(key, fetcher)`, takes a cache key (typically a URL or array) and a fetcher function, and returns the current data, error state, and loading state, automatically caching results by key and revalidating them according to configurable triggers. SWR's defining behavior is returning cached data instantly on subsequent renders or remounts of a component using the same key — avoiding a loading spinner for data the app has already fetched recently — while simultaneously issuing a background request to check for updates, then re-rendering with fresh data if it differs. Like React Query, it automatically revalidates on window focus, network reconnection, and configurable polling intervals, and deduplicates identical requests fired in quick succession across components. SWR deliberately keeps a smaller core API surface than React Query, focusing tightly on the fetch-cache-revalidate loop, with mutation handling (`useSWRMutation`), pagination and infinite loading (`useSWRInfinite`), and other capabilities available as focused, separate hooks rather than bundled into one large API. Being framework-adjacent to Next.js, SWR integrates particularly smoothly with Next.js applications, including support for pre-populating the cache from server-rendered or statically generated data to avoid a client-side refetch flash. SWR and React Query solve largely the same problem and are frequently compared directly; teams often choose SWR for its smaller bundle size and simpler API, or React Query for its broader built-in feature set (devtools, more granular mutation and cache-invalidation controls) in larger applications.
Key Features
- Implements the stale-while-revalidate caching strategy from HTTP caching standards
- useSWR hook returns cached data instantly while revalidating in the background
- Automatic revalidation on window focus, network reconnect, and polling intervals
- Automatic deduplication of identical concurrent requests
- Smaller, more focused core API compared to React Query
- useSWRMutation and useSWRInfinite as separate, focused extension hooks
- Smooth integration with Next.js, including cache pre-population from SSR/SSG data
- Created and maintained by Vercel, the company behind Next.js