Fetch API vs Axios in React — Practical Guide

HTTP requests are a core part of web apps. In React you can use the native Fetch API or a library like Axios. This guide explains both approaches, shows practical examples, and includes a reusable hook you can drop into your projects.

Why read this? You’ll learn when to use Fetch vs Axios, how to handle errors, cancel requests, and structure requests in React and Next.js.

1. Install Axios (if you choose Axios)

Axios is lightweight and adds conveniences like automatic JSON parsing, request/response interceptors, and request cancellation.

Install with npm or yarn:

npm install axios

yarn add axios

2. Quick comparison: Fetch vs Axios

Fetch is built-in (no dependency) and uses Promises. It requires manual checks for HTTP errors (response.ok).
Axios returns the response data directly (no need to call res.json()), has built-in timeout, interceptors, and simpler cancellation.

Choose Fetch for tiny apps or when you want zero dependencies. Choose Axios when you want a nicer API and advanced features.

3. Basic GET request — Fetch

This is the plain Fetch version using async/await.

fetchUsers.js

async function fetchUsers() {
try {
  const res = await fetch('https://jsonplaceholder.typicode.com/users');
  if (!res.ok) throw new Error("HTTP error! status: " + res.status);
  const data = await res.json();
  return data;
} catch (err) {
  console.error('Fetch error:', err);
  throw err;
}
}

Notes:

Check res.ok to catch non-2xx responses.
fetch does not reject on HTTP errors by default.

4. Basic GET request — Axios

Axios simplifies response handling — axios.get resolves with response data.

getUsers.js

import axios from 'axios';

async function getUsers() {
try {
  const { data } = await axios.get('https://jsonplaceholder.typicode.com/users');
  return data;
} catch (err) {
  console.error('Axios error:', err);
  throw err;
}
}

Axios also supports global defaults, baseURL, and interceptors which are handy for auth tokens and logging.

5. POST request examples

Fetch POST example:

createPost-fetch.js

async function createPost(payload) {
const res = await fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(payload),
});
if (!res.ok) throw new Error('Failed to create post');
return res.json();
}

Axios POST example:

createPost-axios.js

async function createPostAxios(payload) {
const { data } = await axios.post('https://jsonplaceholder.typicode.com/posts', payload);
return data;
}

6. Error handling best practices

For Fetch: check res.ok and throw when false.
For Axios: inspect error.response for server replies and error.request for network failures.

Example Axios error handling snippet:

axios-error-handling.js

try {
await axios.get('/some-endpoint');
} catch (error) {
if (error.response) {
  // Server returned a non-2xx status
  console.error('Server error:', error.response.status, error.response.data);
} else if (error.request) {
  // Request made but no response
  console.error('Network error:', error.request);
} else {
  // Something else happened
  console.error('Error:', error.message);
}
}

7. Cancellation and timeouts

Fetch: use AbortController to cancel requests.

fetch-abort.js

const controller = new AbortController();
fetch('/api/data', { signal: controller.signal })
.then(res => res.json())
.catch(err => {
  if (err.name === 'AbortError') console.log('Fetch aborted');
});

// To cancel:
controller.abort();

Axios: use AbortController (modern axios) or CancelToken in older versions; Axios also supports timeout option.

axios-cancel-timeout.js

const controller = new AbortController();
axios.get('/api/data', { signal: controller.signal })
.then(({ data }) => console.log(data))
.catch(err => {
  if (err.name === 'CanceledError') console.log('Axios request canceled');
});

// To cancel:
controller.abort();

// Timeout example
axios.get('/api/data', { timeout: 5000 })
.catch(err => console.error('Timeout or other error', err));

8. Using requests inside React components

Example with useEffect and Fetch:

UsersList.jsx

import React, { useEffect, useState } from 'react';

export default function UsersList() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
  let mounted = true;
  fetch('https://jsonplaceholder.typicode.com/users')
    .then(res => {
      if (!res.ok) throw new Error('Network response not ok');
      return res.json();
    })
    .then(data => {
      if (mounted) setUsers(data);
    })
    .catch(err => {
      if (mounted) setError(err);
    })
    .finally(() => mounted && setLoading(false));

  return () => { mounted = false; };
}, []);

if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
return (
  <ul>
    {users.map(u => <li key={u.id}>{u.name}</li>)}
  </ul>
);
}

Example with Axios and AbortController inside useEffect:

UsersListAxios.jsx

import React, { useEffect, useState } from 'react';
import axios from 'axios';

export default function UsersListAxios() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
  const controller = new AbortController();

  axios.get('https://jsonplaceholder.typicode.com/users', { signal: controller.signal })
    .then(({ data }) => setUsers(data))
    .catch(err => setError(err))
    .finally(() => setLoading(false));

  return () => controller.abort();
}, []);

if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {String(error)}</p>;
return (
  <ul>
    {users.map(u => <li key={u.id}>{u.name}</li>)}
  </ul>
);
}

9. Reusable hook: useAxios (recommended for consistency)

Creating a small hook centralizes axios config (baseURL, headers, interceptors) and keeps components clean.

useAxios.js

import { useState, useEffect } from 'react';
import axios from 'axios';

export function useAxios(url, options) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
  const controller = new AbortController();

  axios.get(url, { signal: controller.signal, ...options })
    .then(({ data }) => setData(data))
    .catch(err => setError(err))
    .finally(() => setLoading(false));

  return () => controller.abort();
}, [url]);

return { data, loading, error };
}

// Usage
// const { data, loading, error } = useAxios('/api/posts');

10. Next.js considerations (SSR / SSG)

For server-side requests (getServerSideProps / getStaticProps) you can use fetch or axios on the server. There is no CORS in SSR since the request is from the server.

Example using getStaticProps with Axios:

pages/posts.js

// pages/posts.js
import axios from 'axios';

export async function getStaticProps() {
const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts');
return { props: { posts: data } };
}

export default function Posts({ posts }) {
return (
  <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>
);
}

11. Tips & best practices

Centralize HTTP logic (create an api/axios.js with baseURL and interceptors).
Handle loading and error states in UI.
Use request cancellation to avoid memory leaks or stale updates.
Prefer try/catch with async/await for cleaner code.
Add retries/backoff only for idempotent GET requests.

Modern Axios Setup: Instance & Interceptors

Instead of using axios directly, create an instance for your app. This lets you set a base URL, default headers, and interceptors for auth and error handling.

lib/axios.js

// lib/axios.js (or lib/axios.ts)
import axios from 'axios';

const api = axios.create({
baseURL: 'https://jsonplaceholder.typicode.com',
timeout: 10000,
headers: {
  'Content-Type': 'application/json',
},
});

// Request interceptor (e.g., add auth token)
api.interceptors.request.use(config => {
// config.headers.Authorization = "Bearer yourToken";
return config;
});

// Response interceptor (global error handling)
api.interceptors.response.use(
response => response,
error => {
  // Optionally show toast, log, or redirect
  return Promise.reject(error);
}
);

export default api;

Using the Axios Instance in React (with TypeScript)

UsersListWithInstance.jsx

import api from '../lib/axios';
import { useEffect, useState } from 'react';

export default function UsersList() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
  const controller = new AbortController();
  api.get('/users', { signal: controller.signal })
    .then(res => setUsers(res.data))
    .catch(err => setError(err))
    .finally(() => setLoading(false));
  return () => controller.abort();
}, []);

if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {String(error)}</p>;
return (
  <ul>
    {users.map(u => <li key={u.id}>{u.name}</li>)}
  </ul>
);
}

TypeScript Example: useAxios Hook

useAxios.ts

import { useState, useEffect } from 'react';
import api from '../lib/axios';

interface UseAxiosResult<T> {
data: T | null;
loading: boolean;
error: any;
}

export function useAxios<T = any>(url: string, options?: object): UseAxiosResult<T> {
const [data, setData] = useState<T | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<any>(null);

useEffect(() => {
  const controller = new AbortController();
  api.get(url, { signal: controller.signal, ...options })
    .then(res => setData(res.data))
    .catch(err => setError(err))
    .finally(() => setLoading(false));
  return () => controller.abort();
}, [url]);

return { data, loading, error };
}

// Usage:
// const { data, loading, error } = useAxios<User[]>('/users');

Why use an Axios instance?

Centralizes config (baseURL, headers, timeout)
Easy to add/remove interceptors for auth, logging, error handling
Cleaner imports in components
Works great with TypeScript

Wrap up

Both Fetch and Axios are valid choices. Fetch keeps your bundle small, Axios gives a nicer API and extra features. For medium/large apps, centralizing with Axios + a hook often reduces duplication and improves maintainability.

If you'd like, I can:

Add an api/axios.js configured file in the repo
Add a demo page showing the hook and Axios setup
Provide TypeScript variants for the samples

Which one should I add next?