The Data Fetching Library Problem in React

React doesn't provide built-in data fetching. The naive approach — useEffect + useState — works for simple cases but fails to handle loading states, error states, caching, refetching, background updates, and optimistic mutations correctly without significant boilerplate. React Query (now TanStack Query) and SWR both solve this problem with a declarative API that handles the complexity automatically. Understanding the differences helps you choose the right tool for your project's complexity level.

SWR: The Simpler Choice

SWR (Stale-While-Revalidate) from Vercel is the simpler of the two libraries. The API surface is small — the primary hook is useSWR(key, fetcher) which returns data, error, and isLoading. SWR handles caching, deduplication of identical requests, background revalidation, focus refetching, and polling. The cache is global by default — all components using the same key share the same cached data. Mutations use mutate(key, data) to update the cache optimistically or after a server response.

SWR is the right choice for: simpler applications with primarily read-heavy data fetching, projects already using Vercel/Next.js where SWR integrates naturally, and teams that prioritize a minimal API surface and smaller bundle size.

TanStack Query: The Comprehensive Choice

TanStack Query (formerly React Query) provides a more comprehensive data synchronization solution. Beyond the basic useQuery hook, it offers useMutation with built-in optimistic updates and rollback, useInfiniteQuery for paginated data, query invalidation and refetching by query key patterns, dependent queries, query prefetching, and a powerful DevTools extension. The query key system is more sophisticated — queries can be invalidated by prefix, enabling patterns like "refetch all user data after a profile update."

TanStack Query is the right choice for: complex applications with heavy mutation patterns (forms, multi-step workflows), applications requiring sophisticated cache invalidation (e.g., invalidate all queries related to a user after logout), and teams that need the full feature set for production SaaS applications.

Bundle Size and Performance

SWR: ~4KB gzipped. TanStack Query: ~13KB gzipped. For most applications, the size difference is negligible relative to the application bundle. Both libraries use React's concurrent features correctly and don't cause unnecessary re-renders. TanStack Query's larger size reflects its significantly larger feature set rather than implementation bloat.

The Verdict for 2026

Default to TanStack Query for new production SaaS applications — the additional features justify the marginal size cost, and the DevTools alone save significant debugging time. Use SWR for simpler read-heavy applications, Next.js projects that benefit from Vercel's native integration, or when bundle size is a critical constraint. ProofMatcher's React templates include TanStack Query pre-configured — download free at proofmatcher.com.