Data fetching is a fundamental part of modern web applications. We use it when we need to log in, find data from an API or even update or delete data. This guide covers different approaches to fetching data in React applications.
This guide covers:
fetch, async/await, axios)Here's a visual representation of the basic data fetching flow in React. We will use this flow to understand the different approaches to fetching data.
There are multiple ways to fetch data in React. Let's look at the most common ones:
The fetch API is built into modern browsers and provides a simple way to make HTTP requests. It returns a promise that resolves to a Response object. This is a low-level API and requires manual parsing of the response body with .json(), but it is an effective way to fetch data.
function UserList() {
const [users, setUsers] = useState([]);
const [error, setError] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch('https://api.example.com/users')
// fetch call returns a promise, so we need to chain .then() to handle the response
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
// Response is a promise, so we need to chain .then() to handle the response
.then(data => {
// data is the JSON body of the response
setUsers(data);
setLoading(false);
})
.catch(error => {
// error is an object that contains the error message
setError(error.message);
setLoading(false);
});
}, []); // Empty dependency array means fetch only runs once on mount
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error}</div>;
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}async/await provides a more readable way to handle promises by allowing us to write asynchronous code that looks synchronous. This approach is particularly useful for complex data fetching scenarios where you need to handle multiple steps or dependencies.
Key benefits of using async/await:
function UserProfile({ userId }) {
// Initialize state for user data, loading status, and potential errors
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
// We need to create a separate async function because useEffect's callback
// cannot be directly async (React needs synchronous cleanup)
const fetchUser = async () => {
try {
// Set loading state before starting the fetch
setLoading(true);
// Await the fetch call - this pauses execution until the request completes
const response = await fetch(`https://api.example.com/users/${userId}`);
// Check if the response is ok (status in the range 200-299)
if (!response.ok) {
throw new Error('Failed to fetch user');
}
// Await the JSON parsing - this also returns a promise
const data = await response.json();
// Update the user state with the fetched data
setUser(data);
} catch (err) {
// If any error occurs in the try block, it will be caught here
setError(err.message);
} finally {
// This block always runs, regardless of success or failure
setLoading(false);
}
};
// Call the async function immediately
fetchUser();
// The dependency array includes userId so the effect runs when userId changes
}, [userId]);
// Show appropriate UI based on the current state
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error}</div>;
if (!user) return <div>No user found</div>;
return (
<div>
<h1>{user.name}</h1>
<p>{user.email}</p>
</div>
);
}🎥 Video: Javascript Promiese vs Async Await EXPLAINED (in 5 minutes)
Axios is a popular HTTP client that offers several advantages over the native fetch API. It provides a more powerful and flexible way to make HTTP requests with features like automatic JSON transformation, request/response interceptors, and better error handling.
Key features of axios:
import axios from 'axios';
function PostList() {
// Initialize state for posts, loading status, and errors
const [posts, setPosts] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
// Create an axios instance with default configuration
// This is useful when you need to make multiple requests to the same API
const api = axios.create({
baseURL: 'https://api.example.com', // Base URL for all requests
timeout: 5000, // Request timeout in milliseconds
headers: {
'Content-Type': 'application/json'
// You can add authentication headers here
// 'Authorization': `Bearer ${token}`
}
});
const fetchPosts = async () => {
try {
setLoading(true);
// Axios automatically transforms JSON response
// No need to call .json() like with fetch
const response = await api.get('/posts');
// Axios puts the response body in the .data property
setPosts(response.data);
} catch (err) {
// Axios provides detailed error information
// err.response contains the response from the server
// err.request contains the request that was made
setError(err.response?.data?.message || 'Failed to fetch posts');
} finally {
setLoading(false);
}
};
fetchPosts();
// Optional: Setup request interceptor for authentication
api.interceptors.request.use((config) => {
// You can modify the request config here
// For example, add authentication tokens
return config;
});
// Optional: Setup response interceptor for error handling
api.interceptors.response.use(
response => response,
error => {
// Handle common errors here
if (error.response?.status === 401) {
// Handle unauthorized access
}
return Promise.reject(error);
}
);
}, []); // Empty dependency array means this effect runs once on mount
if (loading) return <div>Loading posts...</div>;
if (error) return <div>Error: {error}</div>;
return (
<div>
{posts.map(post => (
<article key={post.id}>
<h2>{post.title}</h2>
<p>{post.content}</p>
</article>
))}
</div>
);
}🎥 Video: Fetch Data with Axios
Sometimes you want to fetch data in response to user actions rather than automatically when a component mounts. This pattern is common in search interfaces, forms, and any interactive features that require fresh data.
Key considerations for user-triggered API calls:
function SearchUsers() {
// State for the search query and results
const [query, setQuery] = useState('');
const [results, setResults] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
// Handler for the search action
const handleSearch = async () => {
// Validate input before making the request
if (!query.trim()) return;
setLoading(true);
setError(null); // Clear any previous errors
try {
// Encode the query parameter to handle special characters
const response = await fetch(
`https://api.example.com/search?q=${encodeURIComponent(query)}`
);
if (!response.ok) {
throw new Error('Search failed');
}
const data = await response.json();
setResults(data);
} catch (err) {
console.error('Search failed:', err);
setError('Failed to perform search. Please try again.');
} finally {
setLoading(false);
}
};
return (
<div>
<div className="search-container">
<input
type="text"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search users..."
// Optional: Add keyboard support
onKeyPress={(e) => e.key === 'Enter' && handleSearch()}
/>
<button
onClick={handleSearch}
disabled={loading || !query.trim()}
>
{loading ? 'Searching...' : 'Search'}
</button>
</div>
{error && <div className="error-message">{error}</div>}
<div className="results-container">
{results.map(user => (
<div key={user.id} className="user-card">
<h3>{user.name}</h3>
<p>{user.email}</p>
</div>
))}
</div>
</div>
);
}Here's a comparison of different data fetching approaches:
✅ Pros:
❌ Cons:
✅ Pros:
❌ Cons:
✅ Pros:
❌ Cons:
Here's how different data fetching methods handle the request lifecycle:
🎥 Video: Fetching APIs in React JS
Here's a visual comparison of the three main approaches:
Always show loading indicators to improve user experience:
function LoadingExample() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
// ... fetching logic ...
return (
<div>
{loading ? (
<LoadingSpinner />
) : (
<DataDisplay data={data} />
)}
</div>
);
}Implement proper error boundaries and error states:
function ErrorHandlingExample() {
const [error, setError] = useState(null);
if (error) {
return (
<ErrorDisplay
message={error.message}
onRetry={() => setError(null)}
/>
);
}
// ... rest of component
}Cancel pending requests when component unmounts:
function CancellableRequest() {
useEffect(() => {
const abortController = new AbortController();
fetch(url, { signal: abortController.signal })
.then(response => response.json())
.then(data => {
// Handle data
});
return () => {
abortController.abort();
};
}, []);
}Here's how to implement comprehensive error handling:
🎥 Video: React Error Boundaries: How to Handle and Recover from Errors
