Modern React applications rarely work with static data. Instead, they constantly communicate with backend servers to fetch, create, update, and delete data.
Common examples include:
This communication happens through APIs (Application Programming Interfaces).
In this module, you'll learn about:
Note: We will briefly introduce all of these tools, but throughout this course our primary focus will be Axios and React Query, as they are the most commonly used solutions in modern React applications.
API stands for Application Programming Interface.
An API allows two different applications to communicate with each other.
For example, when a React application needs user information, it doesn't directly access the database. Instead, it sends a request to a backend API.
React Frontend
│
▼
API Request
│
▼
Backend Server
│
▼
Database
The server processes the request and sends back a response.
Example API response:
{
"id": 1,
"name": "Samir",
"email": "samir@gmail.com"
}
React receives this data and displays it on the page.
A typical API request follows this process:
React Component
│
▼
API Request
│
▼
Server
│
▼
JSON Response
│
▼
UI Update
Every modern web application follows this basic workflow.
The Fetch API is the browser's built-in API for making HTTP requests.
No installation is required.
fetch("/api/users")
.then(response =>
response.json()
)
.then(data => {
console.log(data);
});
This sends a GET request to the server and converts the response into a JavaScript object.
Most modern applications prefer async/await.
const fetchUsers =
async () => {
const response =
await fetch("/api/users");
const data =
await response.json();
console.log(data);
};
This produces the same result but is easier to read.
await fetch(
"/api/login",
{
method: "POST",
headers: {
"Content-Type":
"application/json"
},
body: JSON.stringify({
email:
"test@gmail.com"
})
}
);
The request body is converted into JSON before sending it to the server.
Compared to modern libraries, Fetch requires more manual work.
Some limitations include:
Because of this, many React developers prefer Axios.
Axios is the most popular HTTP client for React applications.
It provides a cleaner API and many useful features that Fetch does not include by default.
npm install axios
import axios
from "axios";
const response =
await axios.get(
"/api/users"
);
console.log(
response.data
);
Unlike Fetch, Axios automatically converts JSON responses into JavaScript objects.
await axios.post(
"/api/login",
{
email:
"test@gmail.com"
}
);
await axios.put(
"/api/users/1",
data
);
await axios.delete(
"/api/users/1"
);
const response =
await axios.get(
"/users"
);
console.log(
response.data
);
Axios stores the server response inside the data property.
Axios provides many built-in features:
Interceptors allow code to run before every request or after every response.
They are commonly used for authentication.
Example:
axios.interceptors.request
.use(config => {
config.headers.Authorization =
"Bearer token";
return config;
});
This automatically attaches an authentication token to every request.
Axios has become the industry standard because it provides:
| Feature | Fetch | Axios |
|---|---|---|
| Built Into Browser | Yes | No |
| JSON Parsing | Manual | Automatic |
| Interceptors | No | Yes |
| Syntax | More Verbose | Cleaner |
| Popularity | High | Very High |
SWR is a React data-fetching library developed by Vercel.
SWR stands for:
Stale While Revalidate
It automatically:
npm install swr
import useSWR
from "swr";
const {
data,
error
} = useSWR(
"/api/users",
fetcher
);
The useSWR() hook automatically fetches and caches data.
SWR is especially useful for:
React Query is one of the most popular server-state management libraries in React.
Instead of manually writing loading, error, and caching logic, React Query manages them automatically.
React Query automatically manages:
Without React Query, developers repeatedly write:
useStateuseEffectfor every API request.
React Query simplifies everything into a single hook.
npm install @tanstack/react-query
import {
QueryClient,
QueryClientProvider
}
from "@tanstack/react-query";
const queryClient =
new QueryClient();
<QueryClientProvider
client={queryClient}
>
<App />
</QueryClientProvider>
The provider makes React Query available throughout the application.
const {
data,
isLoading,
error
} = useQuery({
queryKey: ["users"],
queryFn: fetchUsers
});
React Query automatically provides:
React Query provides:
useQuery()
│
▼
Check Cache
│
▼
Fetch Data
│
▼
Store In Cache
│
▼
Update UI
The next time the same data is requested, React Query first checks its cache before making another network request.
Queries are used for reading data.
Mutations are used for changing data.
Common mutation operations include:
Example:
const mutation =
useMutation({
mutationFn:
createUser
});
Today, the most common combination in React applications is:
Axios
+
React Query
Axios handles HTTP requests, while React Query manages server state and caching.
RTK Query is the official data-fetching solution included with Redux Toolkit.
It provides:
npm install @reduxjs/toolkit react-redux
export const api =
createApi({
reducerPath: "api",
endpoints:
builder => ({})
});
RTK Query is most suitable for:
| Tool | Purpose |
|---|---|
| Fetch | Built-in browser API |
| Axios | HTTP Client |
| SWR | Data Fetching & Caching |
| React Query | Server State Management |
| RTK Query | Redux Data Fetching |
Best for:
Best for:
Best for:
Best for:
Best for:
Although we briefly introduced every API integration tool, our primary focus throughout this course will be:
Axios
+
React Query
A typical request follows this flow:
React Component
│
▼
React Query
│
▼
Axios Request
│
▼
Backend API
│
▼
Response Cache
│
▼
UI Update
This combination provides a clean and scalable architecture.
Axios provides cleaner syntax and built-in features such as interceptors and automatic JSON parsing.
Avoid manually managing loading states, errors, and caching with useState and useEffect.
Let React Query handle them automatically.
Instead of placing API requests directly inside components, keep them in dedicated API files.
Example:
src/
│
├── api/
│ ├── users.js
│ ├── auth.js
│ └── products.js
This keeps components clean and reusable.
Always display appropriate UI while waiting for data.
Examples include:
Never assume a request will always succeed.
Repeatedly requesting the same data wastes bandwidth and slows applications.
React Query automatically caches responses and greatly improves performance.
| Tool | Main Purpose |
|---|---|
| Fetch | Native API requests |
| Axios | HTTP client |
| SWR | Data fetching & caching |
| React Query | Server state management |
| RTK Query | Redux-integrated data fetching |
Modern React applications rely heavily on APIs to communicate with backend servers.
Many tools are available:
Throughout this course, our primary stack will be:
React
│
▼
Axios
│
▼
React Query
│
▼
Backend API
This combination provides:
Mastering Axios and React Query will allow you to build scalable, production-ready React applications that efficiently communicate with backend services.