SWR vs React Query: Choosing the Right Tool

SWR weighs approximately 7kb gzipped. React Query v5 is approximately 13kb gzipped. The size difference reflects React Query's additional features: query prefetching, query cancellation, a more detailed query lifecycle, and built-in DevTools.

For size-sensitive applications or simple fetch-display patterns, SWR's smaller footprint is a meaningful advantage.

SWR has a simpler, more minimalistic API. If your primary need is fetching data and displaying it with automatic revalidation, SWR covers this elegantly with very little boilerplate.

Being built by Vercel, SWR integrates exceptionally well with Next.js, especially for combining getServerSideProps or getStaticProps prefetch with client-side revalidation via fallback data.

Pass prefetched data to SWR via the fallback option in SWRConfig or the fallbackData option in useSWR. SWR uses this as the initial cache value, eliminating the first-load flash while enabling background revalidation.

This pattern is the recommended data fetching approach for Next.js Pages Router applications with Vercel.

React Query offers finer control over the query lifecycle: staleTime, gcTime (garbage collection), refetchOnWindowFocus, retry count, and retry delay are all individually configurable. Its mutation system with onSuccess, onError, and onSettled callbacks is expressive.

React Query also supports query cancellation via AbortSignal, useful for search-as-you-type UIs.

React Query's useInfiniteQuery with getNextPageParam is purpose-built for infinite scroll and load-more patterns. It manages the page cursor logic and provides a flat or structured pages object.

SWR has useSWRInfinite which covers similar ground but with a slightly lower-level API requiring more manual page assembly.

React Query supports prefetching queries on hover or on route change with queryClient.prefetchQuery. Data is in the cache before the component mounts, giving an instant render experience.

SWR does not have a built-in prefetch API beyond SSR fallback data. For hover-based prefetching, React Query is the better choice.

React Query v5 simplified the API by making useQuery return isPending instead of isLoading, unifying optimistic update patterns, and improving TypeScript inference. The v5 API is cleaner and more consistent than earlier versions.

If evaluating React Query, target v5 directly rather than learning v4 and migrating.

SWR shares cache entries globally across components by key without any provider configuration beyond SWRConfig for defaults. React Query requires QueryClientProvider with a QueryClient instance.

For rapid prototyping or simple apps, SWR's zero-configuration global cache is faster to set up. React Query's explicit client is better for large apps with complex caching requirements.

Choose SWR when your app is primarily built on Next.js, the data fetching patterns are straightforward (fetch-display-revalidate), you want minimal bundle size, or your team values API simplicity over advanced features.

SWR is also a great choice when adopting an incremental data fetching library into an existing codebase without a major migration.

Choose React Query when you need complex server state management: infinite scroll, query prefetching, background refetch strategies, multi-step query dependencies, or fine-grained cache TTL control.

React Query also has a more active ecosystem of middleware and DevTools, and its queryClient can be tested more easily in isolation.

Some teams use both: SWR for simple single-resource fetches in leaf components, and React Query for complex multi-query pages with prefetching. This is uncommon but valid if the team is proficient in both APIs.

More commonly, teams pick one and apply it consistently throughout the application to avoid context switching and dual dependency overhead.

Approximately how do the bundle sizes of SWR and React Query compare?

SWR (~7kb) is simpler, integrates natively with Next.js, and covers most fetch-display patterns with minimal code. React Query (~13kb) offers richer features: infinite queries, prefetching, fine-grained lifecycle callbacks, and query cancellation.

Choose SWR for simplicity and Next.js projects; choose React Query for complex server state requirements. Both support TypeScript, Suspense, SSR, and offline patterns.