Data Fetching

SWR vs React Query

Compare the two leading React data fetching libraries by downloads, growth, and real-world adoption

swr@tanstack/react-query

Weekly Downloads — Last 6 Months

swr

v2.4.1

React Hooks library for remote data fetching

npm GitHub

Weekly

6.1M

Monthly

33.0M

Growth

+50%

Bundle (gzip)

4.7 kB

@tanstack/react-query

v5.90.21

Hooks for managing, caching and syncing asynchronous and remote data in React

npm GitHub

Weekly

16.3M

Monthly

93.1M

Growth

+36%

Bundle (gzip)

—

Package Breakdown

swr

Minimal React hook for data fetching with stale-while-revalidate caching

✓ Best For

Simple data fetching needs, Next.js projects (same team as Vercel), and teams who want the smallest possible API surface

✗ Weakness

Limited mutation support compared to React Query, less built-in tooling for complex cache management

@tanstack/react-queryRecommended

Comprehensive server state management with mutations, devtools, and cache control

✓ Best For

Applications with complex data requirements, mutations with optimistic updates, infinite scroll, and teams who want explicit cache control

✗ Weakness

Larger API surface to learn, more setup required, QueryClient boilerplate

SWR or React Query?

For most React applications in 2026, React Query is the stronger choice. Its comprehensive feature set handles real-world complexity that SWR's minimal API requires you to build yourself — mutations, optimistic updates, and the devtools alone justify the additional setup.

SWR makes sense when your data fetching needs are genuinely simple — primarily GET requests, no complex mutation patterns, and you're in a Next.js environment where SWR feels at home. Its smaller bundle and simpler API are real advantages for straightforward use cases.

The meaningful signal in the download data: React Query's growth has been faster, and it has become the more common recommendation in the React community for anything beyond basic fetching.

Recommended: @tanstack/react-query

More complete server state solution — mutations, devtools, and cache control handle real-world complexity SWR requires you to build yourself.

Which to Use For Each Use Case

Use CaseWinner
Simple read-only data fetchingswr
CRUD application with mutations@tanstack/react-query
Infinite scroll / pagination@tanstack/react-query
Next.js appswr
Debugging cache issues@tanstack/react-query

FAQ

Can I use SWR and React Query together?+
You can but shouldn't. Both manage a client-side cache of server data, and running two caches creates inconsistency and doubles the bundle cost. Pick one and use it consistently. If you're already using SWR for simple fetching and find yourself needing mutation features, that's the signal to migrate to React Query.
Does React Query replace Redux or Zustand?+
For server state (data from APIs), yes — React Query is a better tool than Redux for caching and synchronizing remote data. For client state (UI state, local application state), you still need Zustand, Jotai, or similar. Most modern React apps benefit from React Query for server state plus Zustand for client state — they're complementary.
What changed in TanStack Query v5?+
TanStack Query v5 (the React Query rebrand) brought a simplified API — the callback-based options were removed in favor of object syntax, the status field now includes a fetchStatus for more granular loading states, and the bundle was reduced. The core mental model is unchanged. Migration from v4 is straightforward for most codebases.
Does SWR work with Next.js App Router?+
SWR works on the client side. In the Next.js App Router, Server Components fetch data directly without hooks — no SWR or React Query needed for server-rendered data. SWR and React Query remain useful for client components that need to fetch, refetch, or mutate data after the initial render. The App Router has reduced but not eliminated the need for client-side data fetching libraries.

Related Comparisons

State Management

Redux vs Zustand vs Jotai

redux · zustand · jotai

HTTP Clients

Axios vs node-fetch vs got

axios · node-fetch · got

Frontend Frameworks

React vs Vue vs Svelte

react · vue · svelte

Server state management — fetching, caching, synchronizing, and updating data from APIs — is one of the most common problems in React applications. SWR (stale-while-revalidate), created by Vercel, and React Query (now TanStack Query), created by Tanner Linsley, both solve this problem elegantly but with different levels of scope and complexity.

SWR takes a minimal approach: a single hook that handles caching and revalidation with a tiny API surface. React Query goes deeper — mutations, optimistic updates, infinite queries, devtools, and a more explicit cache management model. The choice between them often comes down to how much of the problem you need solved.

The Server State Problem

Before SWR and React Query, React developers managed server state with useEffect + useState — fetching in effects, storing in state, manually handling loading and error states, and re-fetching when needed. This pattern works but doesn't scale: cache invalidation, background refreshes, deduplication of identical requests, and optimistic updates all require significant boilerplate.

SWR, released by Vercel in 2019, introduced the stale-while-revalidate caching strategy to React: show cached (stale) data immediately, then revalidate in the background and update when fresh data arrives. The hook API is minimal — useSWR(key, fetcher) — and the mental model is simple enough to explain in one sentence.

React Query (rebranded TanStack Query in v5) launched around the same time but with a broader scope. Where SWR handles fetching, React Query handles the entire server state lifecycle: queries, mutations, cache management, background sync, pagination, infinite scroll, and optimistic updates. The QueryClient and explicit cache keys give more control at the cost of more setup.

Compare Any Packages

Search any npm package and build your own custom comparison.

Open npm Trends Tool