Choose TanStack Query for most modern React apps, use SWR for smaller read-heavy apps, and use Axios when you only need a clean HTTP client. Axios still sees huge install volume, but download charts show TanStack Query and SWR growing because React teams now care about cache, retries, stale data, and background updates, not just “make a request” [source: npm trends].
TLDR: If your app has dashboards, filters, pagination, optimistic updates, or many shared API calls, pick TanStack Query. If you are building a content site, profile page, or simple SaaS screen where data is mostly read and refreshed in the background, SWR feels light and fast. If a team spends even 20% of its React code handling loading flags, duplicate requests, and manual cache bugs, switching from plain Axios to a query library can save real time. For example, a customer table with 10 tabs and 5 filters is much easier with TanStack Query than with hand-written Axios state.
Axios: great at HTTP, not server state
Axios is not really a React data library. It is an HTTP client. That matters. It handles requests, responses, interceptors, timeouts, headers, and errors nicely. If you need to attach auth tokens or call REST endpoints from many places, Axios is still useful.
The catch is that Axios stops where the painful React work starts. It does not know if data is stale. It does not dedupe requests by default. It will not refetch on window focus. It will not give you cache invalidation, background sync, or optimistic updates.
So you end up writing code like this:
- isLoading state
- error state
- data state
- cleanup logic for unmounted components
- manual retry rules
- cache objects that nobody wants to maintain
Honestly, it feels like rebuilding the same wheel for the fifth sprint in a row. Axios is fine for tiny apps, admin scripts, form submissions, and one-off calls. For serious React screens, it needs help.
TanStack Query: the serious choice for complex apps
TanStack Query, formerly React Query, is built for server state. That means API data that lives outside your app, changes over time, and needs to be synced with the UI.
Its biggest strength is control. You get query keys, cache times, stale times, request deduping, retries, pagination helpers, mutations, invalidation, and devtools. That sounds like a lot because it is. But when your app grows, it becomes a relief.
TanStack Query works well for:
- Dashboards with many widgets
- Data tables with filters and pagination
- CRUD apps with create, update, and delete flows
- Offline-aware or retry-heavy interfaces
- Teams that need clear rules for API state
The annoying part is the setup cost. You need a QueryClient. You need to think about query keys. You need to learn invalidation. At first, it may feel like extra ceremony. But that ceremony pays back when one mutation updates three screens without weird stale data bugs.
Best pick: medium to large React apps where API state is central to the product.
SWR: small, clean, and pleasant
SWR was created by Vercel. Its name comes from stale while revalidate. The idea is simple: show cached data first, then refresh it in the background.
SWR has a lovely API. You call a hook, pass a key and a fetcher, and get data, loading state, and errors back. It shines when your app mostly reads data and does not need heavy mutation logic.
SWR is great for:
- Blogs and content sites
- User profiles
- Settings pages
- Light SaaS tools
- Next.js apps that need simple client fetching
It drives me crazy that some teams pick a huge setup for a page that only reads three endpoints. SWR fits that case better. It is quick to add, easy to read, and does not ask you to plan every cache rule on day one.
Still, SWR can feel limited when mutations get tricky. You can mutate cached data, yes. But TanStack Query gives you a richer system for large workflows.
Axios vs TanStack Query vs SWR: quick comparison
| Tool | Best For | Main Weakness |
|---|---|---|
| Axios | HTTP calls, interceptors, auth headers, simple requests | No built-in React cache or server state handling |
| TanStack Query | Complex apps, mutations, cache rules, dashboards | More concepts to learn |
| SWR | Simple read-heavy apps, clean hooks, background refresh | Less powerful for complex mutation flows |
Can you use them together?
Yes. A common setup is Axios plus TanStack Query. Axios handles the request details. TanStack Query handles the cache and UI state. The same is true for Axios plus SWR. Axios becomes the fetcher.
Example pattern:
- Use Axios for base URLs, auth tokens, and response handling.
- Use TanStack Query or SWR for React hooks, cache, and refetching.
- Do not use plain Axios in components unless the request is truly simple.
How to choose
Pick Axios only if your project has a few API calls and no shared data concerns. Pick SWR if you want simple hooks and fast background refresh for mostly read-only screens. Pick TanStack Query if your app has many API states, mutations, filters, and screens that must stay in sync.
For most production React apps, TanStack Query is the safest default. For smaller apps, SWR is refreshingly simple. And Axios? Keep it as the HTTP layer, not the whole data strategy.
