Comparing
Hooks for managing, caching and syncing asynchronous and remote data in React
React data fetching with stale-while-revalidate caching — one hook for all your remote data needs with automatic revalidation.
| Metric | react-query | swr |
|---|---|---|
| Ecosystem | npm | npm |
| Difficulty | Beginner | Beginner |
| Weekly downloads | 1.6M | 3.5M↑ |
| Latest version | v3.39.3 | v2.3.3 |
| Recipes | 1 | 2↑ |
react-query only
Shared
swr only
Use React Query for any React app that fetches server data: REST APIs, GraphQL, or any async function. It replaces 95% of the useEffect+useState patterns for data fetching and adds caching, background refetching, and optimistic updates for free.
Read-heavy React apps: dashboards, profiles, lists. When you want simple cache-first data with background refresh. When components far apart need to share server data without prop drilling.
React Query is for server state (data that lives on a server). For UI state (modals, form values, local toggles), use useState or Zustand. If you're already using a full data layer like Apollo Client for GraphQL, React Query is redundant.
Complex mutation workflows with optimistic updates and rollbacks (react-query/TanStack Query is more powerful for this). Server-side rendering where you need full control over data fetching timing.
react-query
swr