React API Calls using Fetch & Axios – Complete Integration Guide (2025)

Introduction – Why API Calls Matter in React

React.js apps often need to interact with external services—REST APIs, GraphQL endpoints, or backend servers. Whether you’re loading user data, submitting forms, or integrating with third-party services, making API calls is essential.

React supports multiple ways to fetch data, but the most common are:

• fetch – native browser API
• Axios – a popular, feature-rich HTTP client

In this guide, you’ll learn:

• How to perform GET/POST requests using fetch and axios
• How to handle loading, success, and error states
• When to use each approach
• Best practices for reusable API logic in React

1. Using the Native fetch API

fetch() is built into modern browsers and provides a promise-based interface to make HTTP requests.

Basic GET Request:

useEffect(() => {
  fetch('https://jsonplaceholder.typicode.com/posts')
    .then((res) => {
      if (!res.ok) throw new Error('Failed to fetch');
      return res.json();
    })
    .then((data) => setPosts(data))
    .catch((err) => setError(err));
}, []);

POST Request:

fetch('/api/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ title: 'React Rocks!' }),
});

2. Making API Calls with Axios

Axios simplifies HTTP calls by handling JSON parsing, request cancellation, and interceptors.

Install Axios:

npm install axios

Axios GET Request:

import axios from 'axios';

useEffect(() => {
  axios.get('https://jsonplaceholder.typicode.com/posts')
    .then((res) => setPosts(res.data))
    .catch((err) => setError(err));
}, []);

Axios POST Request:

axios.post('/api/posts', {
  title: 'Learning Axios with React',
  content: 'Axios makes HTTP easier',
});

3. Fetch vs Axios – Feature Comparison

4. Reusable API Call Functions

With fetch:

export async function fetchData(url) {
  const res = await fetch(url);
  if (!res.ok) throw new Error('Error fetching data');
  return await res.json();
}

With Axios:

import axios from 'axios';

export const apiClient = axios.create({
  baseURL: '/api',
  headers: { 'Content-Type': 'application/json' },
});

Use Axios interceptors to add tokens or log errors

5. useEffect + API Calls Pattern

useEffect(() => {
  let isMounted = true;
  fetchData('/api/data')
    .then(data => isMounted && setData(data))
    .catch(err => console.error(err));

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

Prevents state update on unmounted component
Consider AbortController for fetch cleanup

6. API Call Use Cases in React

Best Practices

Use try/catch with async/await for readability
Manage loading and error states
Cancel long-running requests on unmount
Extract API logic into separate utility files
Handle HTTP error codes gracefully

Summary – Recap & Next Steps

Both fetch and Axios allow you to make powerful API calls in React. While fetch is native and lightweight, Axios offers a more ergonomic and feature-rich developer experience—especially in larger applications.

Key Takeaways:

• Use fetch() for native, simple API calls
• Use Axios for larger apps with interceptors and error handling
• Manage loading and errors using useState and useEffect
• Cancel requests and avoid memory leaks
• Abstract logic for reusability and scalability

Real-World Relevance:
Used in production apps for dashboards, login flows, file uploads, and real-time data sync in apps like Airbnb, GitHub, and Slack.

FAQ Section

Should I use fetch or axios in React?
Use fetch for simple use cases and Axios for advanced needs like interceptors, auto JSON parsing, and cancellation.

How do I handle API errors?
Use try/catch or .catch() to handle failures and show fallback UI or messages.

Can I cancel an API request in React?
Yes. Use AbortController with fetch or CancelToken with Axios.

Is useEffect required for API calls?
For component-based data loading, yes. It ensures the fetch runs after render and not during the render phase.

How do I show a loading spinner during API calls?
Use a loading state with conditional rendering:

{loading ? <Spinner /> : <Data />}