How To Fetch The Data From API In React JS

Introduction

Fetching data from an API is one of the most common tasks in React applications.

But if you're new to React, you might be wondering: How do I actually fetch data from an API in React? What methods should I use? And how do I handle errors properly?

This guide will walk you through the different ways to fetch data in React, from using the built-in fetch() method to more advanced solutions like Axios and React Query.

What Is an API?

An API (Application Programming Interface) allows your React app to communicate with a server and retrieve data.

APIs can return data in different formats, but JSON (JavaScript Object Notation) is the most commonly used format.

Here’s an example of what JSON data might look like:

{
  "id": 1,
  "name": "John Doe",
  "email": "[e-mail]"
}

Your React app can fetch this data from the API and display it to users in a meaningful way.

Ways to Fetch Data in React

There are three common ways to fetch data in React:

1. Using Fetch API (Built-in JavaScript method)
2. Using Axios (A popular third-party library)
3. Using React Query (For managing server state efficiently)

Let’s go through each one with examples.

1. Fetching Data Using fetch()

The fetch() function is a built-in JavaScript method for making HTTP requests. It’s simple to use and works in most browsers.

Example: Fetch Data with fetch()

import { useEffect, useState } from "react";

function FetchData() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users") // Example API
      .then((response) => {
        if (!response.ok) {
          throw new Error("Failed to fetch data");
        }
        return response.json();
      })
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default FetchData;

Explanation:

• useEffect() ensures the API call runs when the component mounts.
• fetch() retrieves data from the API.
• .then() processes the response and updates the state.
• .catch() handles errors like network failures.
• The component conditionally renders a loading state, an error message, or the fetched data.

2. Fetching Data Using Axios

Axios is a popular alternative to fetch() because it has a simpler syntax and built-in error handling. First, install Axios:

npm install axios

Example: Fetch Data with Axios

import { useEffect, useState } from "react";
import axios from "axios";

function FetchDataWithAxios() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then((response) => {
        setData(response.data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default FetchDataWithAxios;

Why Use Axios?

• Shorter syntax (axios.get() vs. fetch().then()...)
• Automatic JSON conversion (no need to call .json())
• Better error handling

3. Fetching Data Using React Query

If your app makes frequent API calls, React Query helps manage data fetching, caching, and background updates efficiently. First, install React Query:

npm install @tanstack/react-query

Example: Fetch Data with React Query

import { useQuery } from "@tanstack/react-query";
import axios from "axios";

function FetchDataWithReactQuery() {
  const { data, isLoading, error } = useQuery({
    queryKey: ["users"],
    queryFn: async () => {
      const response = await axios.get("https://jsonplaceholder.typicode.com/users");
      return response.data;
    },
  });

  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>
  );
}

export default FetchDataWithReactQuery;

Why Use React Query?

• Handles caching and automatic refetching
• Improves performance by reducing unnecessary API calls
• Simplifies data fetching logic

Handling Errors in API Calls

When working with APIs, things can go wrong—network failures, incorrect URLs, or server issues. Always handle errors properly to improve user experience.

Here are some best practices:

• Check for response status codes (response.ok)
• Show error messages to users
• Use a fallback UI (e.g., "Something went wrong")
• Retry API calls when necessary

FAQs

1. What is the best way to fetch data in React?

If you need a simple request, use fetch() or Axios. If you're building a large-scale app, React Query is the best choice.

2. How do I fetch data when a button is clicked?

Instead of using useEffect(), call the API inside a function and trigger it when the button is clicked:

const fetchData = () => {
  fetch("https://jsonplaceholder.typicode.com/users")
    .then(response => response.json())
    .then(data => console.log(data));
};
<button onClick={fetchData}>Fetch Data</button>;

3. Can I fetch data from a protected API?

Yes, but you’ll need to include authentication tokens in the request headers using Axios or fetch().

Further Resources

• React Official Documentation
• Axios GitHub Repository
• React Query Documentation

Conclusion

Fetching data in React is a fundamental skill that allows you to build dynamic and interactive applications.

Whether you use fetch(), Axios, or React Query, understanding how to retrieve and handle data efficiently is crucial for building great user experiences.

What method do you prefer for fetching API data in React? Let’s discuss in the comments! 🚀