How to Use Axios in React

Use Axios in React when your components need cleaner HTTP requests, easier JSON handling, request interceptors, or reusable API clients. It is especially useful for apps with authentication, shared headers, and many API calls.

What you’ll build or solve

You’ll learn how to use Axios in React with useEffect, useState, and async requests. You’ll also know how to centralize API configuration.

When this approach works best

This approach is the right choice when the app makes multiple API calls and needs more control than fetch().

Common real-world scenarios include:

• Authenticated dashboards
• Product APIs
• Shared API clients
• Token refresh flows
• Error interceptors

This is a bad idea when one tiny request can be handled with the built-in fetch() API just as clearly.

Prerequisites

You only need:

• A React app
• The axios package installed
• Basic hooks knowledge

Step-by-step instructions

Step 1: Make a request inside useEffect

Import Axios and fetch data on mount.

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

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

  useEffect(() => {
    async function loadUsers() {
      const response = await axios.get("/api/users");
      setUsers(response.data);
    }

    loadUsers();
  }, []);

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default Users;

Axios automatically parses JSON into response.data.

Step 2: Add loading and error state

Production-ready components should handle request states.

const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
  async function loadUsers() {
    try {
      const response = await axios.get("/api/users");
      setUsers(response.data);
    } catch {
      setError("Failed to load users");
    } finally {
      setIsLoading(false);
    }
  }

  loadUsers();
}, []);

This keeps the UI resilient.

Step 3: Create a reusable Axios client

For larger apps, centralize shared config.

import axios from "axios";

const api = axios.create({
  baseURL: "/api",
  headers: {
    Authorization: "Bearer token"
  }
});

export default api;

Then reuse it.

const response = await api.get("/users");

What to look for:

• Axios returns parsed JSON in response.data
• Great for shared clients
• Works cleanly with async/await
• Interceptors support auth flows
• Better for larger API-heavy apps

Examples you can copy

Product fetch

const response = await axios.get("/api/products");

POST request

await axios.post("/api/orders", orderData);

Reusable API client

const api = axios.create({ baseURL: "/api" });

Common mistakes and how to fix them

Mistake 1: Using response.json()

What the reader might do:

const data = await response.json();

Why it breaks: Axios already parses JSON.

Corrected approach:

Use response.data.

Mistake 2: Forgetting error handling

What the reader might do:

Await the request without try/catch.

Why it breaks: failed requests can crash the component.

Corrected approach:

Wrap requests in try/catch.

Mistake 3: Repeating base URLs everywhere

What the reader might do:

Write full API URLs in every component.

Why it breaks: maintenance becomes harder.

Corrected approach:

Use axios.create().

Troubleshooting

If the request returns undefined, use response.data.

If auth headers repeat, centralize them in a reusable client.

If requests fail silently, add try/catch.

If the app only needs simple one-off requests, compare fetch() first.

Quick recap

• Use Axios for cleaner API requests
• Read JSON from response.data
• Use useEffect() for fetch-on-mount
• Add loading and error state
• Use axios.create() for shared config