How to Fetch Data From an API in ReactJS?

ReactJS provides several ways to interact with APIs, allowing you to retrieve data from the server and display it in your application. In this article, we’ll walk you through different methods to fetch data from an API in ReactJS, including using the built-in fetch method, axios, and managing the state effectively.

Prerequisites:

• Node.js should be installed
• You should have a basic understanding of React.js
• A text Editor (Such as VS Code, etc.)

First of all, we need to understand about API(Application Programming Interface) - It enables the exchange of Information and functionality between different systems, such as between website or server or between different software applications.

Now, we’ll look at the various methods available for fetching data from an API in ReactJS:

Method 1. Using JavaScript fetch() method

The fetch() method in JavaScript is used to make network requests (such as HTTP requests) and fetch data from a specified URL. It returns a Promise that resolves to the Response object representing the response to the request.

/* App.css*/ 
.App {
    text-align: center;
    /* color: Green; */
}
.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.item {
    min-width: 33rem;
    text-align: left;
}
.geeks {
    color: green;
}

import React, { useState, useEffect } from "react";
import "./App.css";
const App = () => {
    const [items, setItems] = useState([]);
    const [dataIsLoaded, setDataIsLoaded] = useState(false);

    useEffect(() => {
        fetch("https://jsonplaceholder.typicode.com/users")
            .then((res) => res.json())
            .then((json) => {
                setItems(json);
                setDataIsLoaded(true);
            });
    }, []); 
    if (!dataIsLoaded) {
        return (
            <div>
                <h1>Please wait some time....</h1>
            </div>
        );
    }
    return (
        <div className="App">
            <h1 className="geeks">GeeksforGeeks</h1>
            <h3>Fetch data from an API in React</h3>
            <div className="container">
                {items.map((item) => (
                    <div className="item" key={item.id}>
                        <ol>
                            <div>
                                <strong>User_Name: </strong>
                                {item.username},
                            </div>
                            <div>Full_Name: {item.name}</div>
                            <div>User_Email: {item.email}</div>
                        </ol>
                    </div>
                ))}
            </div>
        </div>
    );
};
export default App;

Output

Code Overview:

• This React component fetches data from an API using the fetch method inside componentDidMount().
• It stores the fetched data in the state and displays the user's username, name, and email once the data is loaded.
• If the data is still loading, it shows a "Please wait" message.

Method 2. Using axios library

Axios library is a popular, promise-based JavaScript library used to make HTTP requests from the browser or NodeJS. It simplifies making requests to APIs, handling responses, and managing errors compared to the native fetch() method.

Install Axios library using the following command

npm install axios

The updated dependencies in the package.json file are:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "axios": "^1.6.7",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
},

Note: The version number may differ slightly depending on the latest release. As of early 2025, version 1.6.x is common.

/* App.css*/ 
.App {
    text-align: center;
    /* color: Green; */
}
.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.item {
    min-width: 33rem;
    text-align: left;
}
.geeks {
    color: green;
}

// App.js
import React, { useState, useEffect } from "react";
import "./App.css";
import axios from "axios";
const App = () => {
    const [items, setItems] = useState([]);
    const [dataIsLoaded, setDataIsLoaded] = useState(false);

    useEffect(() => {
        axios
            .get("https://jsonplaceholder.typicode.com/users")
            .then((res) => {
                setItems(res.data);
                setDataIsLoaded(true);
            });
    }, []);
    if (!dataIsLoaded) {
        return (
            <div>
                <h1>Please wait some time....</h1>
            </div>
        );
    }
    return (
        <div className="App">
            <h1 className="geeks">GeeksforGeeks</h1>
            <h3>Fetch data from an API in React</h3>
            <div className="container">
                {items.map((item) => (
                    <div className="item" key={item.id}>
                        <ol>
                            <div>
                                <strong>User_Name: </strong>
                                {item.username},
                            </div>
                            <div>Full_Name: {item.name}</div>
                            <div>User_Email: {item.email}</div>
                        </ol>
                    </div>
                ))}
            </div>
        </div>
    );
};
export default App;

Output:

Code Overview:

• This React component uses axios to fetch data from an API when the component mounts.
• It stores the fetched data in the state and displays the users' username, name, and email once the data is loaded.
• If the data is not loaded, it shows a loading message.

Method 3. Using the Stale-While-Revalidate (SWR) Method

SWR is a data-fetching library developed by vercel that makes it easy to fetch and cache data in React applications. The concept behind SWR is simple: fetch data, use stale data for immediate UI rendering, and revalidate it in the background to get fresh data. SWR includes useState() and useEffect(), so there is no need to import them.

Below we have mentioned Steps to Install SWR

Step1 : Install swr

npm install swr

Step 2: Import all the packages needed for the App.

import React from 'react';
import useSWR from 'swr';
const fetcher = (url) => fetch(url).then((res) => res.json());
const App = () => {
    const { data, error } = useSWR('https://jsonplaceholder.typicode.com/users', fetcher);
    if (error) return <p>Error loading data</p>;
    if (!data) return <p>Loading...</p>;
    return (
        <div>
            <ul>
                {data.map((user) => (
                    <li key={user.id}>
                        <h3>{user.username}</h3>
                        <p>{user.name}</p>
                        <p>{user.email}</p>
                    </li>
                ))}
            </ul>
        </div>
    );
};
export default App;

Output

Code Overview:

• SWR automatically handles caching, background revalidation, and state management for data fetching.
• The useSWR hook fetches the data and handles the logic for loading, error, and success states.
• It provides an automatic re-fetching of data if the component re-renders or if the data becomes stale.

Method 4. Using the React Query Library

React Query is another powerful library that simplifies data fetching, caching, synchronization, and more. It is great for applications where the data changes frequently and you need efficient, real-time data fetching with minimal boilerplate.

Steps to Install React Query

npm install react-query

import React from 'react';
import { useQuery } from 'react-query';

// Function to fetch data
const fetchUsers = async () => {
    const res = await fetch('https://jsonplaceholder.typicode.com/users');
    if (!res.ok) throw new Error('Network error');
    return res.json();
};

const App = () => {
    // Use useQuery to fetch data
    const { data, error, isLoading } = useQuery('users', fetchUsers);

    if (isLoading) return <p>Loading...</p>;
    if (error) return <p>Error loading data</p>;

    return (
        <div>
            <h1>User List</h1>
            <ul>
                {data.map((user) => (
                    <li key={user.id}>
                        <h3>{user.username}</h3>
                        <p>{user.name}</p>
                        <p>{user.email}</p>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default App;

import React from 'react';
import { QueryClient, QueryClientProvider } from 'react-query';
import App from './App';

const queryClient = new QueryClient();

function Root() {
    return (
        <QueryClientProvider client={queryClient}>
            <App />
        </QueryClientProvider>
    );
}

export default Root;

Output

Code Overview:

• React Query’s useQuery hook is used to fetch data and manage state.
• It automatically handles caching, background refetching, and error handling.
• If the data is still loading, it shows a loading message. If there's an error, it displays an error message.

Method 5. Use the useFetch custom hook from react-fetch-hook

A custom hook in React is a regular Javascript function that lets you reuse logic across different components. It's built using React's built-in hooks like useState and useEffect.

Custom hooks make your code cleaner and easier to manage by putting shared functionality in one place. For example:- if you fetch data in several components, you can write a custom hook like useFetch to handle it.

Step 1: Install the react-fetch-hook

npm install react-fetch-hook

Once the installation is complete, navigate to the start of your application's file

Step 2: Import the package for React App file.

import useFetch from "react-fetch-hook";

Syntax Example for react-fetch-hook

import React from 'react';
import useFetch from 'react-fetch-hook';
function App() {
  const { isLoading, data, error } = useFetch("https://jsonplaceholder.typicode.com/posts");
  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  return (
    <div style={{ padding: "20px", fontFamily: "Arial" }}>
      <h1>Posts</h1>
      <ul>
        {data.slice(0, 10).map((post) => (
          <li key={post.id}>
            <strong>{post.title}</strong>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}
export default App;

Each Method has it's own strength but choosing the Best API Method in React is essential while Fetching Data from an API.

• fetch() : It is Lightweight and built into JavaScript, making it perfect for simple and small-scale projects without adding dependencies.
• axios: It Provides a cleaner API, automatic JSON parsing, better error handling, and supports features like interceptors for robust HTTP requests.
• SWR: It automatically handles caching, revalidation, and background data fetching with minimal code, ideal for real-time and performance-focused apps.
• React Query: It is an Advanced server-state management with powerful caching, background refetching, and pagination support, best for complex and large-scale applications.

react-fetch-hook (useFetch): It Simplifies data fetching with an easy-to-use custom hook, making it great for developers who want minimal setup and a lightweight solution.
Summary

Fetching data from an API is a critical task in modern web applications, and both fetch() and axios are widely used methods for achieving this in React. Use fetch() if you prefer a native, lightweight solution for making HTTP requests in your React apps. Use Axios for more features like automatic JSON parsing, improved error handling, and a cleaner syntax for HTTP requests.

Efficiency and Use Cases of API Fetching Methods in React

nishantsinghgfg

Follow

Improve

Article Tags :

• Misc
• Web Technologies
• ReactJS
• React-Questions

Practice Tags :

• Misc