What Are API Calls?

An API call is a request made from a client (React application) to a server to fetch, create, update, or delete data.

In React, API calls are usually performed to:

• Fetch data from a backend
• Submit form data
• Authenticate users
• Load dynamic content

Almost every real-world application such as data-driven web platforms relies heavily on API communication.

When and Where to Make API Calls in React

API calls are typically made:

• Inside useEffect for side effects
• On user actions (button click, form submit)
• Inside custom hooks or service layers

API Calls Using Fetch

What Is Fetch?

Fetch is a native browser API used to make HTTP requests. It returns a promise that resolves to a Response object.

Basic Fetch GET Request

import { useEffect, useState } from "react";

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

  useEffect(() => {
    fetch("https://api.example.com/users")
      .then(response => response.json())
      .then(data => setUsers(data))
      .catch(error => console.error(error));
  }, []);

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

POST Request Using Fetch

fetch("https://api.example.com/users", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ name: "John" })
});

Limitations of Fetch

• No automatic JSON parsing
• No built-in request/response interceptors
• Manual error handling required

API Calls Using Axios

What Is Axios?

Axios is a popular third-party HTTP client for JavaScript that works in both browsers and Node.js.

It simplifies API calls and provides advanced features out of the box.

Installing Axios

npm install axios

Basic Axios GET Request

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

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

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

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

POST Request Using Axios

axios.post("https://api.example.com/users", {
  name: "John"
});

Axios automatically converts JavaScript objects to JSON.

This ease of use is common in applications handling user submissions like structured form workflows.

Axios Interceptors (Advanced Feature)

axios.interceptors.request.use(config => {
  config.headers.Authorization = "Bearer token";
  return config;
});

Interceptors are useful for authentication, logging, and error handling.

Fetch vs Axios: Comparison

Real-World Example Scenario

In a production application:

• Fetch may be used for small or simple apps
• Axios is preferred for large apps with authentication
• Centralized API layers improve maintainability

These architectural decisions are commonly discussed in frontend system design articles.

Common Mistakes

• Making API calls directly inside render
• Not handling loading and error states
• Ignoring cleanup on unmount
• Scattering API logic across components

Best Practices & Special Notes

• Use useEffect for side effects
• Centralize API logic in services
• Handle loading, success, and error states
• Cancel requests on component unmount

Testing API-handling scenarios using interactive knowledge checks helps reinforce real-world data-fetching patterns.

Final Takeaway

API calls are the backbone of data-driven React applications. Fetch provides a lightweight, native solution, while Axios offers powerful features for complex requirements. Choosing the right tool and implementing API calls correctly ensures performance, reliability, and maintainability in production systems.