React Fetch API vs Axios

When building modern React applications, one of the most common tasks is fetching data from APIs. Whether it’s getting user details, displaying products, or submitting form data, you’ll need a way to make HTTP requests to servers.

Two of the most popular methods for making these requests in React are the Fetch API and Axios. Both are great tools — but they differ in usability, features, and flexibility.

Fetch API

The Fetch API is a built-in JavaScript function that allows you to make HTTP requests directly from the browser.

Since it’s native to JavaScript, you don’t need to install any extra libraries.

Example – Using Fetch in React:

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

function FetchExample() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("<https://jsonplaceholder.typicode.com/users>")
      .then(response => {
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        return response.json();
      })
      .then(data => setUsers(data))
      .catch(error => console.error("Fetch error:", error));
  }, []);

  return (
    <div>
      <h2>Users (via Fetch)</h2>
      <ul>
        {users.map(user => <li key={user.id}>{user.name}</li>)}
      </ul>
    </div>
  );
}

export default FetchExample;

Advantages of Fetch API:

• Built into all modern browsers (no installation required)
• Works well for basic GET/POST requests
• Follows the Promise-based syntax

Limitations of Fetch API:

• Doesn’t automatically handle JSON parsing or request cancellation
• Requires extra steps for error handling
• No built-in timeout or interceptors

Axios

Axios is a popular third-party library for making HTTP requests. It simplifies API calls by offering cleaner syntax and more advanced features compared to Fetch.

To use Axios, install it first:

npm install axios

Example – Using Axios in React:

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

function AxiosExample() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get("<https://jsonplaceholder.typicode.com/users>")
      .then(response => setUsers(response.data))
      .catch(error => console.error("Axios error:", error));
  }, []);

  return (
    <div>
      <h2>Users (via Axios)</h2>
      <ul>
        {users.map(user => <li key={user.id}>{user.name}</li>)}
      </ul>
    </div>
  );
}

export default AxiosExample;

Advantages of Axios:

• Automatically transforms JSON data
• Supports request cancellation, timeouts, and interceptors
• Handles errors and responses more cleanly
• Works in both browser and Node.js environments

Limitations of Axios:

• Requires installation of an extra dependency
• Slightly larger bundle size compared to Fetch

Feature Comparison – Fetch vs Axios

When to Use Which?

• Use Fetch API if:
  • You want a lightweight and native solution
  • Your requests are simple (like GET/POST)
  • You want zero extra dependencies
• Use Axios if:
  • You need advanced features (like interceptors or timeouts)
  • You handle authentication, large-scale APIs, or complex data
  • You prefer a simpler syntax with less boilerplate

Example – Comparing Both Side by Side

// Fetch API
fetch("<https://api.example.com/data>")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

// Axios
axios.get("<https://api.example.com/data>")
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

As you can see, Axios automatically handles JSON parsing and provides cleaner syntax, while Fetch requires more manual handling.