Data Fetching in React 2025: TanStack Query vs SWR vs RTK Query

Data Fetching is Solved

Modern data fetching libraries handle caching, deduplication, background updates, and more. Stop writing custom solutions.

Quick Comparison

TanStack Query: The Complete Solution

TanStack Query (formerly React Query) is the most feature-rich option.

Key Features

• Caching - automatic with smart invalidation
• Background updates - stale-while-revalidate
• Pagination - infinite scroll support
• Mutations - optimistic updates
• DevTools - excellent debugging

Example

```tsx import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

function UserProfile({ userId }) { const { data, isLoading } = useQuery({ queryKey: ['user', userId], queryFn: () => fetchUser(userId), });

if (isLoading) return <Spinner />; return <div>{data.name}</div>; }

function UpdateUser() { const queryClient = useQueryClient();

const mutation = useMutation({ mutationFn: updateUser, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['user'] }); }, }); } ```

Best For

• Most React applications
• Complex caching needs
• Real-time data

SWR: Lightweight Alternative

SWR from Vercel is simpler and smaller.

Key Features

• Tiny - 4kb bundle
• Simple API - easy to learn
• Revalidation - focus, interval, reconnect
• Next.js - great integration

Example

```tsx import useSWR from 'swr';

function Profile() { const { data, error, isLoading } = useSWR('/api/user', fetcher);

if (error) return <div>Error</div>; if (isLoading) return <div>Loading...</div>; return <div>{data.name}</div>; } ```

Best For

• Simple data fetching
• Bundle-size sensitive
• Next.js projects

RTK Query: Redux Integration

RTK Query is built into Redux Toolkit.

Key Features

• Redux integration - shares store
• Code generation - from OpenAPI
• Caching - normalized cache
• TypeScript - excellent types

Best For

• Redux applications
• OpenAPI backends
• Existing RTK users

Server Components Alternative

With React Server Components, you might not need these libraries:

```tsx // Server Component - no client-side fetching library needed async function UserProfile({ userId }) { const user = await db.user.findUnique({ where: { id: userId } }); return <div>{user.name}</div>; } ```

Our Recommendation

• Most apps: TanStack Query
• Simple needs: SWR
• Redux apps: RTK Query
• Server Components: Direct fetching

Explore data tools in our Tools directory or compare options with our Compare tool.

Sources

• TanStack Query Documentation
• SWR Documentation
• RTK Query Documentation