How to Fetch API in React

Modern web applications rely heavily on dynamic data to deliver rich, interactive experiences. In React, one of the most fundamental skills developers must master is how to fetch API data effectively. Whether you're pulling user profiles from a backend service, retrieving product listings from an e-commerce platform, or integrating with third-party services like weather APIs or payment gateways, the ability to make HTTP requests and manage responses is essential.

React itself does not include built-in methods for making HTTP requests. Instead, it provides the tools and lifecycle hooks necessary to integrate with JavaScripts native Fetch API or third-party libraries like Axios. Understanding how to fetch API data in React isnt just about writing a single line of codeits about managing state, handling loading and error states, avoiding memory leaks, and ensuring your application remains performant and user-friendly.

This comprehensive guide will walk you through everything you need to know to fetch APIs in Reactfrom the basics of using the Fetch API to advanced patterns with hooks, error handling, and performance optimization. By the end, youll have a solid, production-ready understanding of how to integrate external data sources into your React applications confidently and efficiently.

Step-by-Step Guide

Prerequisites

Before diving into API fetching, ensure you have the following installed and configured:

• Node.js (v14 or higher)
• npm or yarn
• A React project created with Create React App, Vite, or another modern toolchain

If you dont have a React project yet, create one using:

npx create-react-app api-fetch-demo
cd api-fetch-demo
npm start

Once your project is running, youre ready to begin fetching data.

Understanding the Fetch API

JavaScripts native Fetch API is a modern, promise-based interface for making HTTP requests. It replaces the older XMLHttpRequest and offers a cleaner, more powerful syntax. The Fetch API returns a Promise that resolves to a Response object, which you can then process to extract the actual data.

Heres the basic syntax:

fetch(url)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

In React, youll use this pattern inside functional components, typically within the useEffect hook, to fetch data when the component mounts.

Step 1: Create a Basic Data Fetching Component

Lets build a simple component that fetches a list of users from the JSONPlaceholder APIa free, fake REST API commonly used for testing.

Create a new file called UserList.js in your src folder:

import React, { useEffect, useState } from 'react';
const UserList = () => {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
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);
setLoading(false);
})
.catch(error => {
setError(error.message);
setLoading(false);
});
}, []);
if (loading) return <p>Loading users...</p>;
if (error) return <p>Error: {error}</p>;
return (
<div>
<h2>Users</h2>
<ul>
{users.map(user => (
<li key={user.id}>{user.name} ({user.email})</li>
))}
</ul>
</div>
);
};
export default UserList;

This component demonstrates the core structure of API fetching in React:

• useState is used to manage the data (users), loading state (loading), and error state (error).
• useEffect runs once on mount (empty dependency array []) to trigger the fetch.
• Fetch is called with the API endpoint.
• The response is checked for success using response.ok.
• Data is parsed as JSON and stored in state.
• UI is conditionally rendered based on state: loading, error, or success.

Step 2: Handling Different HTTP Methods

While GET requests are the most common, youll often need to POST, PUT, or DELETE data. Heres how to handle a POST request to add a new user:

const addUser = async () => {
const newUser = {
name: 'Jane Doe',
email: 'jane@example.com',
phone: '123-456-7890'
};
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(newUser),
});
if (!response.ok) {
throw new Error('Failed to add user');
}
const addedUser = await response.json();
setUsers([...users, addedUser]);
} catch (error) {
setError(error.message);
}
};

This example uses async/await syntax, which many developers prefer for readability. Its fully compatible with React and can be used inside event handlers or custom hooks.

Step 3: Using Async/Await for Cleaner Code

While promises work perfectly, async/await syntax makes asynchronous code look and behave more like synchronous code, improving readability and debugging.

Heres the same UserList component rewritten using async/await:

import React, { useEffect, useState } from 'react';
const UserList = () => {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchUsers = async () => {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
setUsers(data);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
fetchUsers();
}, []);
if (loading) return <p>Loading users...</p>;
if (error) return <p>Error: {error}</p>;
return (
<div>
<h2>Users</h2>
<ul>
{users.map(user => (
<li key={user.id}>{user.name} ({user.email})</li>
))}
</ul>
</div>
);
};
export default UserList;

The finally block ensures that loading is set to false regardless of success or failure, which is a best practice for consistent UI behavior.

Step 4: Fetching Data on User Interaction

APIs arent always fetched on component mount. Often, youll want to trigger a request based on user actionslike searching or filtering.

Heres an example of a search component that fetches GitHub users based on a query:

import React, { useState, useEffect } from 'react';
const GitHubSearch = () => {
const [query, setQuery] = useState('');
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const handleSearch = async () => {
if (!query.trim()) return;
setLoading(true);
setError(null);
try {
const response = await fetch(https://api.github.com/search/users?q=${query});
if (!response.ok) {
throw new Error('Failed to fetch users');
}
const data = await response.json();
setUsers(data.items);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
return (
<div>
<input
type="text"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search GitHub users..."
/>
<button onClick={handleSearch}>Search</button>
{loading && <p>Searching...</p>}
{error && <p>Error: {error}</p>}
<ul>
{users.map(user => (
<li key={user.id}>
<a href={user.html_url} target="_blank" rel="noopener noreferrer">
{user.login}
</a>
</li>
))}
</ul>
</div>
);
};
export default GitHubSearch;

This component demonstrates how to decouple data fetching from component lifecycle and tie it directly to user input.

Step 5: Fetching Multiple APIs Concurrently

Sometimes, you need to fetch data from multiple endpoints simultaneously. Reacts Promise.all() is perfect for this.

Heres an example that fetches both users and posts from JSONPlaceholder:

import React, { useEffect, useState } from 'react';
const CombinedData = () => {
const [users, setUsers] = useState([]);
const [posts, setPosts] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchAllData = async () => {
try {
const [usersResponse, postsResponse] = await Promise.all([
fetch('https://jsonplaceholder.typicode.com/users'),
fetch('https://jsonplaceholder.typicode.com/posts')
]);
if (!usersResponse.ok || !postsResponse.ok) {
throw new Error('One or more requests failed');
}
const usersData = await usersResponse.json();
const postsData = await postsResponse.json();
setUsers(usersData);
setPosts(postsData);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
fetchAllData();
}, []);
if (loading) return <p>Loading data...</p>;
if (error) return <p>Error: {error}</p>;
return (
<div>
<h2>Users</h2>
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
<h2>Posts</h2>
<ul>
{posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
};
export default CombinedData;

Promise.all() waits for all promises to resolve. If any one fails, the entire operation failsmaking it ideal for interdependent data. For independent data where failure of one shouldnt block others, consider Promise.allSettled().

Best Practices

Always Handle Loading and Error States

Never assume an API call will succeed. Always provide visual feedback to users:

• Show a spinner or skeleton loader during loading.
• Display a clear, actionable error message if the request fails.
• Provide a retry button for transient errors (e.g., network timeouts).

Example of a retryable error state:

{error && (
<div>
<p>Failed to load data: {error}</p>
<button onClick={fetchData}>Retry</button>
</div>
)}

Use Custom Hooks for Reusability

Repeating the same fetch logic across components leads to code duplication and maintenance challenges. Create a custom hook to encapsulate API logic:

// hooks/useApi.js
import { useState, useEffect } from 'react';
const useApi = (url) => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const result = await response.json();
setData(result);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
fetchData();
}, [url]);
return { data, loading, error };
};
export default useApi;

Now use it anywhere:

import useApi from './hooks/useApi';
const UserList = () => {
const { data: users, loading, error } = useApi('https://jsonplaceholder.typicode.com/users');
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error}</p>;
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
};

Avoid Memory Leaks with AbortController

When a component unmounts before a fetch completes, React will warn you about state updates on an unmounted component. To prevent this, use AbortController to cancel requests:

useEffect(() => {
const controller = new AbortController();
const fetchData = async () => {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users', {
signal: controller.signal,
});
if (!response.ok) throw new Error('Network response was not ok');
const data = await response.json();
setUsers(data);
} catch (err) {
if (err.name === 'AbortError') {
console.log('Fetch aborted');
return;
}
setError(err.message);
} finally {
setLoading(false);
}
};
fetchData();
return () => controller.abort(); // Cleanup on unmount
}, []);

This ensures that if the user navigates away before data loads, the request is canceled, preventing unnecessary work and warnings.

Use Environment Variables for API URLs

Never hardcode API endpoints. Store them in environment variables:

Create a .env file in your project root:

REACT_APP_API_BASE_URL=https://jsonplaceholder.typicode.com

Access it in your code:

fetch(${process.env.REACT_APP_API_BASE_URL}/users)

This makes your code more maintainable and secureespecially when deploying to different environments (development, staging, production).

Implement Caching and Debouncing

For search or filter APIs, avoid making a request on every keystroke. Use debouncing to delay requests until the user pauses typing:

import { useState, useEffect } from 'react';
const useDebounce = (value, delay) => {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => {
clearTimeout(handler);
};
}, [value, delay]);
return debouncedValue;
};
// In component:
const [query, setQuery] = useState('');
const debouncedQuery = useDebounce(query, 500);
useEffect(() => {
if (debouncedQuery) {
fetchUsers(debouncedQuery);
}
}, [debouncedQuery]);

For frequently accessed data, consider implementing client-side caching using libraries like React Query or SWR (covered in the Tools section).

Validate and Sanitize API Responses

Never trust external data. Always validate the shape and content of API responses:

if (Array.isArray(data) && data.every(item => item.id && item.name)) {
setUsers(data);
} else {
setError('Invalid data format received');
}

For complex applications, use TypeScript interfaces or runtime validation libraries like Zod or Yup.

Tools and Resources

React Query (TanStack Query)

React Query (now known as TanStack Query) is the industry-standard library for managing server state in React. It handles caching, background updates, pagination, mutations, and moreautomatically.

Install it:

npm install @tanstack/react-query

Example usage:

import { useQuery } from '@tanstack/react-query';
const fetchUsers = async () => {
const res = await fetch('https://jsonplaceholder.typicode.com/users');
if (!res.ok) throw new Error('Failed to fetch');
return res.json();
};
const UserList = () => {
const { data, isLoading, error } = useQuery({
queryKey: ['users'],
queryFn: fetchUsers,
});
if (isLoading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
return (
<ul>
{data.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
};

Benefits:

• Automatic caching and refetching
• Stale-while-revalidate strategy
• Background updates
• Query invalidation and pagination

SWR (Stale-While-Revalidate)

Developed by Vercel, SWR is another excellent alternative to React Query. Its lightweight and uses a similar philosophy: serve cached data first, then revalidate in the background.

npm install swr

import useSWR from 'swr';
const fetcher = (...args) => fetch(...args).then(res => res.json());
const UserList = () => {
const { data, error } = useSWR('https://jsonplaceholder.typicode.com/users', fetcher);
if (error) return <p>Error: {error.message}</p>;
if (!data) return <p>Loading...</p>;
return (
<ul>
{data.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
};

Axios

While Fetch is native, Axios is a popular third-party HTTP client with built-in features like request/response interceptors, automatic JSON parsing, and better error handling.

npm install axios

import axios from 'axios';
const fetchUsers = async () => {
const response = await axios.get('https://jsonplaceholder.typicode.com/users');
return response.data;
};
// Usage in useEffect:
useEffect(() => {
fetchUsers()
.then(data => setUsers(data))
.catch(err => setError(err.message));
}, []);

Axios is especially useful for applications with complex authentication flows or when you need to set default headers globally.

Postman and Insomnia

Before integrating an API into your React app, test it in tools like Postman or Insomnia. These allow you to:

• Inspect response structure
• Test different headers and methods
• Generate code snippets for JavaScript, React, and other languages

JSONPlaceholder and Mock Service Worker (MSW)

For local development, use JSONPlaceholder for fake REST endpoints. For more realistic mocking, use Mock Service Worker (MSW) to intercept API calls and return mock data without touching the network.

npm install msw

MSW is invaluable for testing components in isolation and simulating edge cases (e.g., network errors, slow responses).

Browser DevTools

Always monitor network requests in your browsers DevTools (Network tab). Look for:

• Response status codes (200, 404, 500)
• Response time and payload size
• Headers (CORS issues, authentication tokens)

This helps diagnose issues quickly and optimize performance.

Real Examples

Example 1: Weather Dashboard

Fetch real-time weather data from OpenWeatherMap API:

import React, { useState, useEffect } from 'react';
const WeatherDashboard = () => {
const [weather, setWeather] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchWeather = async () => {
const API_KEY = process.env.REACT_APP_WEATHER_API_KEY;
const city = 'London';
try {
const response = await fetch(
https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric
);
if (!response.ok) {
throw new Error('City not found or API limit reached');
}
const data = await response.json();
setWeather(data);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
fetchWeather();
}, []);
if (loading) return <p>Loading weather data...</p>;
if (error) return <p>Error: {error}</p>;
return (
<div>
<h2>{weather.name}, {weather.sys.country}</h2>
<p>Temperature: {weather.main.temp}C</p>
<p>Humidity: {weather.main.humidity}%</p>
<p>Description: {weather.weather[0].description}</p>
</div>
);
};
export default WeatherDashboard;

Example 2: E-commerce Product List with Pagination

Fetch paginated products from an API:

import React, { useState, useEffect } from 'react';
const ProductList = () => {
const [products, setProducts] = useState([]);
const [page, setPage] = useState(1);
const [loading, setLoading] = useState(false);
const [hasMore, setHasMore] = useState(true);
useEffect(() => {
const fetchProducts = async () => {
if (loading) return;
setLoading(true);
try {
const response = await fetch(
https://fakestoreapi.com/products?limit=10&page=${page}
);
if (!response.ok) throw new Error('Failed to fetch products');
const data = await response.json();
if (data.length < 10) setHasMore(false);
setProducts(prev => [...prev, ...data]);
} catch (err) {
console.error(err);
} finally {
setLoading(false);
}
};
fetchProducts();
}, [page]);
const loadMore = () => setPage(prev => prev + 1);
return (
<div>
<div>
{products.map(product => (
<div key={product.id}>
<h3>{product.title}</h3>
<p>${product.price}</p>
</div>
))}
</div>
{loading && <p>Loading more products...</p>}
{hasMore && !loading && (
<button onClick={loadMore}>Load More</button>
)}
{!hasMore && <p>No more products</p>}
</div>
);
};
export default ProductList;

Example 3: Authentication with Login and Protected Route

Fetch user data after login and store token in localStorage:

import React, { useState } from 'react';
const LoginForm = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const [user, setUser] = useState(null);
const handleSubmit = async (e) => {
e.preventDefault();
setError('');
try {
const response = await fetch('/api/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email, password }),
});
if (!response.ok) {
throw new Error('Invalid credentials');
}
const { token } = await response.json();
localStorage.setItem('authToken', token);
setUser({ email });
} catch (err) {
setError(err.message);
}
};
return (
<form onSubmit={handleSubmit}>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Email"
required
/>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Password"
required
/>
<button type="submit">Login</button>
{error && <p style={{ color: 'red' }}>{error}</p>}
</form>
);
};
export default LoginForm;

FAQs

What is the difference between Fetch and Axios?

Fetch is a native browser API that requires manual handling of JSON parsing and error states. Axios is a third-party library that automatically transforms responses, handles errors more intuitively, and supports features like request interceptors and cancellation. Axios is often preferred for enterprise applications, while Fetch is sufficient for simpler use cases.

Why is my API call not working in React?

Common causes include:

• CORS restrictions on the server
• Incorrect URL or missing protocol (http:// vs https://)
• Missing or invalid API keys
• Network issues or offline mode
• Trying to fetch from localhost during production builds

Check the browsers Network tab and console for error messages.

Can I use async/await in useEffect?

Yes, but you cannot make the useEffect function itself async. Instead, define an async function inside useEffect and call it immediately, as shown in the examples above.

How do I handle authentication headers in API calls?

Include headers in the fetch options:

fetch(url, {
headers: {
'Authorization': Bearer ${token},
'Content-Type': 'application/json'
}
})

Store tokens securely in localStorage or sessionStorage, and include them in every authenticated request.

How do I test API calls in React?

Use tools like MSW (Mock Service Worker) to intercept and mock API responses during testing. Combine with Jest and React Testing Library to write unit and integration tests that verify component behavior without hitting real endpoints.

Is it safe to store API keys in React?

No. Client-side code is visible to users. Never store sensitive keys (e.g., database credentials, secret API keys) in React environment variables. Use a backend proxy to handle authentication and secure requests.

What should I do if an API is slow?

Implement loading states, skeleton UIs, and caching. Use React Query or SWR for automatic stale-while-revalidate behavior. Consider lazy loading or pagination to reduce initial payload size.

Conclusion

Finding the right way to fetch APIs in React is not just a technical exerciseits a critical part of building responsive, reliable, and scalable applications. From mastering the native Fetch API to leveraging advanced libraries like React Query, the tools and patterns available today empower developers to handle data with confidence.

Remember: data fetching is not just about making HTTP requests. Its about managing state, handling errors gracefully, optimizing performance, and providing an excellent user experience. By following the best practices outlined in this guideusing custom hooks, aborting stale requests, validating responses, and leveraging modern toolsyoull build React applications that are not only functional but also robust and maintainable.

Start simple. Build incrementally. Test thoroughly. And never underestimate the power of clean, well-structured data-fetching logic. Whether youre building a personal project or a production-grade SaaS platform, the ability to fetch and manage API data efficiently will be one of your most valuable skills as a React developer.