React Data Fetching: axios-hooks vs React Query vs SWR

When building modern React applications, managing server state is one of the most common challenges. Developers often move from basic useEffect fetching to specialized libraries to handle caching, loading states, and errors. axios-hooks, react-query, and swr offer different approaches to this problem. Let's compare how they handle real-world engineering scenarios.

🏗️ Core Philosophy: Wrapper vs. State Manager

axios-hooks acts as a direct bridge between Axios and React.

• It wraps Axios instances into hooks.
• Best for teams standardizing on Axios who want less boilerplate.
• Tightly couples your components to the Axios library.

// axios-hooks: Direct Axios binding
import useAxios from 'axios-hooks';

function UserProfile() {
  const { data, loading, error } = useAxios('/api/users/1');
  if (loading) return <p>Loading...</p>;
  return <div>{data.name}</div>;
}

react-query treats server data as a separate state category.

• It manages caching, synchronization, and updates independently.
• Works with any HTTP client (fetch, axios, graphql).
• Requires more setup but offers greater control.

// react-query: Server state management
import { useQuery } from '@tanstack/react-query';

function UserProfile() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['user', 1],
    queryFn: () => fetch('/api/users/1').then(res => res.json())
  });
  if (isLoading) return <p>Loading...</p>;
  return <div>{data.name}</div>;
}

swr focuses on the stale-while-revalidate strategy.

• It returns cached data immediately while fetching fresh data in the background.
• Extremely minimal configuration for basic use cases.
• Built by Vercel with Next.js integration in mind.

// swr: Stale-while-revalidate
import useSWR from 'swr';

function UserProfile() {
  const { data, error, isLoading } = useSWR('/api/users/1', fetcher);
  if (isLoading) return <p>Loading...</p>;
  return <div>{data.name}</div>;
}

🔄 Caching and Revalidation Strategies

axios-hooks caches based on request configuration.

• Identical config objects return cached promises.
• Less flexible for complex invalidation scenarios.
• Manual control required for refetching.

// axios-hooks: Config-based caching
const { data } = useAxios({
  url: '/api/posts',
  method: 'GET'
});
// Same config returns cached result automatically

react-query uses query keys for precise cache control.

• You can invalidate specific queries by key.
• Supports background refetching on window focus.
• Highly configurable stale times.

// react-query: Key-based caching
const { data } = useQuery({
  queryKey: ['posts'],
  queryFn: getPosts,
  staleTime: 1000 * 60 * 5 // 5 minutes
});
// queryClient.invalidateQueries(['posts']) triggers refetch

swr revalidates automatically on focus or reconnect.

• Default behavior is to show stale data then update.
• Simple API for manual revalidation.
• Great for real-time feel without websockets.

// swr: Auto-revalidation
const { data, mutate } = useSWR('/api/posts', fetcher);
// Automatically revalidates when window regains focus
// mutate() manually triggers revalidation

✏️ Handling Mutations (POST/PUT/DELETE)

axios-hooks uses a manual trigger hook.

• Separates read and write operations clearly.
• Requires managing loading state manually.
• Less built-in support for optimistic updates.

// axios-hooks: Manual mutation
import useAxios from 'axios-hooks';

function EditForm() {
  const [{ loading }, execute] = useAxios(
    { url: '/api/users/1', method: 'PUT' },
    { manual: true }
  );
  return <button onClick={() => execute()}>Save</button>;
}

react-query provides a dedicated mutation hook.

• Includes callbacks for success, error, and settlement.
• Supports optimistic updates out of the box.
• Integrates with query invalidation automatically.

// react-query: Dedicated mutation hook
import { useMutation, useQueryClient } from '@tanstack/react-query';

function EditForm() {
  const queryClient = useQueryClient();
  const mutation = useMutation({
    mutationFn: updateUser,
    onSuccess: () => queryClient.invalidateQueries(['users'])
  });
  return <button onClick={() => mutation.mutate()}>Save</button>;
}

swr offers a mutation hook or helper.

• useSWRMutation is available for complex cases.
• Simple mutate function for basic updates.
• Optimistic updates require manual cache manipulation.

// swr: Mutation helper
import useSWRMutation from 'swr/mutation';

function EditForm() {
  const { trigger } = useSWRMutation('/api/users/1', sendPutRequest);
  return <button onClick={() => trigger()}>Save</button>;
}

📦 Package Status and Maintenance

axios-hooks is stable but niche.

• Not deprecated, but development pace is slower.
• Tied to Axios ecosystem updates.
• Suitable for legacy Axios-heavy codebases.

// axios-hooks: Import structure
import useAxios from 'axios-hooks';
// No major namespace changes recently

react-query has migrated to TanStack.

• The react-query npm package is legacy (v3).
• New projects should use @tanstack/react-query (v4/v5).
• Active maintenance with frequent updates.

// react-query: Modern import
import { useQuery } from '@tanstack/react-query';
// Old 'react-query' package is no longer recommended

swr is actively maintained by Vercel.

• Stable API with incremental improvements.
• Strong integration with Next.js features.
• Regular security and performance patches.

// swr: Standard import
import useSWR from 'swr';
// Consistent API across recent versions

🌐 Similarities: Shared Ground

While the differences are clear, all three libraries aim to simplify data fetching in React. Here are key overlaps:

1. ⚛️ Hook-Based API

• All three use React Hooks for component logic.
• Encourage functional component patterns.
• Manage loading and error states internally.

// All packages use similar hook patterns
const { data, loading, error } = useLibrary(...);

2. 🔄 Automatic Loading States

• Provide boolean flags for UI feedback.
• Reduce boilerplate compared to useState.
• Standardize error handling across components.

// Common pattern across all three
if (loading) return <Spinner />;
if (error) return <ErrorMessage />;

3. 🛡️ Error Handling

• Capture HTTP errors automatically.
• Expose error objects to components.
• Allow retry logic configuration.

// All expose error objects
const { error } = useLibrary(...);
console.error(error.message);

📊 Summary: Key Differences

💡 The Big Picture

axios-hooks is like a specialized adapter 🔌 — it connects Axios directly to your UI. Use it if you are locked into Axios and want minimal setup for simple GET requests without introducing a larger library.

react-query (TanStack Query) is like a command center 🎛️ — it gives you full control over server state, caching, and synchronization. Use it for complex dashboards, enterprise apps, or when you need robust mutation handling and cache invalidation.

swr is like a streamlined dashboard 🚀 — it gets you up and running fast with smart defaults. Use it for content sites, Next.js projects, or when you want automatic revalidation without heavy configuration.

Final Thought: For most new professional projects, react-query (TanStack) or swr are the safer long-term bets due to their flexibility and active maintenance. Reserve axios-hooks for specific scenarios where Axios coupling is already a decided standard and complexity is low.