How to Fetch and Display Data from API in React JS: A Step-by-Step Guide

Fetching data is fundamental in web development, especially when building dynamic React applications. This blog will guide you through the process, ensuring you're well-equipped to make your React app interactive and up-to-date with the latest data.

In web applications, APIs (Application Programming Interfaces) serve as the conduits through which data flows. API integration in a React app involves sending HTTP requests to an API endpoint, which returns data in JSON format. This data can be anything from user profiles to real-time financial information. Fetching data from an API is a common task you'll perform repeatedly as you build and enhance your React applications.

Setting Up the React Environment

Before fetching data, you must set up your React development environment. This involves creating a new React app, which you can do by running the following command in your project directory:

1npx create-react-app my-app
2

You can start building your components once your React app is set up. Here's an essential React component that we'll use as a starting point:

1import React from 'react';
2
3function App() {
4  return (
5    <div>
6      <h1>Data Fetching in React</h1>
7      {/* Data will be displayed here */}
8    </div>
9  );
10}
11
12export default App;
13

Fetching Data with JavaScript Fetch API

The JavaScript Fetch API is a modern interface that allows you to request HTTP API endpoints directly from your React app. This native web API is promise-based, making it an excellent choice for handling asynchronous operations like fetching data. It's also a part of the window object, which means it's available in all modern web browsers, simplifying fetching data across different platforms.

Making HTTP Requests to API Endpoints

To fetch data from an API, you'll typically send an HTTP request to a specific API endpoint. The endpoint is a URL representing the web API you're trying to communicate with. Each endpoint corresponds to a different set of data or a different operation you can perform on the data.

Here's how you can use the Fetch API to send a GET request to an API endpoint:

1const url = 'https://api.example.com/data';
2
3async function fetchData() {
4  try {
5    const response = await fetch(url);
6    // More code will follow to handle the response
7  } catch (error) {
8    console.error('Error fetching data:', error);
9  }
10}
11
12fetchData();
13

In this snippet, const url represents the API endpoint from which you want to fetch data. The fetchData async function uses the fetch method to initiate the HTTP request. If the server responds successfully, the fetch method returns a response object containing the fetched data and other details about the request.

Handling JSON Data and HTTP Methods

When the Fetch API completes a request, the server usually returns data in JSON format. JSON (JavaScript Object Notation) is a lightweight data transfer format that people can read and write while machines can scan and generate.

You'll need to parse the response to handle the JSON data returned from the API. Here's how you can extend the previous example to include JSON data handling:

1async function fetchData() {
2  try {
3    const response = await fetch(url);
4    const data = await response.json(); // Parse JSON data
5    console.log(data); // Now you can work with the JSON data
6  } catch (error) {
7    console.error('Error fetching data:', error);
8  }
9}
10

HTTP methods such as GET, POST, PUT, DELETE, etc., define the operation you want to perform on the API data. The Fetch API allows you to specify the HTTP method in the request:

1async function postData(url = '', data = {}) {
2  const response = await fetch(url, {
3    method: 'POST', // HTTP method
4    headers: {
5      'Content-Type': 'application/json',
6    },
7    body: JSON.stringify(data), // body data type must match "Content-Type" header
8  });
9  return response.json(); // parses JSON response into native JavaScript objects
10}
11

The Role of Const Response in Fetching Data

In the context of the Fetch API, const response is a constant that holds the response object returned by the fetch method. This object contains all the information about the response, including the status code, headers, and body content.

The response object plays a critical role in fetching data as it provides methods to handle the fetched data. For example, response.json() is used to parse the response's body as JSON.

1async function fetchData() {
2  const response = await fetch(url);
3  if (!response.ok) {
4    throw new Error('Network response was not ok');
5  }
6  const data = await response.json();
7  return data;
8}
9

In this example, we first check if the response is okay, meaning the HTTP request was successful. If it is, we proceed to parse the JSON data. If not, we throw an error that can be caught and handled appropriately.

Utilizing React Query for Optimized Data Fetching

React Query is a robust framework with hooks for fetching, caching, and updating asynchronous data in React applications. Using React Query, developers can simplify fetching data and managing server state in their React apps. It automates many of the complexities of data fetching, such as caching, background updates, and stale data handling.

Introduction to React Query Library

The React Query library is designed to handle fetching, caching, synchronizing, and updating server state in a React app. It offers a robust set of features, making it an excellent choice for developers looking to enhance their data fetching capabilities. React Query provides hooks that encapsulate the fetching logic, which means you can avoid the boilerplate code that typically comes with managing server state.

To get started with React Query, you must install it in your project directory using the command:

npm install react-query

Once installed, you can set up the QueryClient and QueryClientProvider to provide the React Query context to your application:

1import { QueryClient, QueryClientProvider } from 'react-query';
2
3const queryClient = new QueryClient();
4
5function App() {
6  return (
7    <QueryClientProvider client={queryClient}>
8      {/* Your application components go here */}
9    </QueryClientProvider>
10  );
11}
12
13export default App;
14

Fetching Data with React Query Hooks

React Query provides several hooks for fetching data, but the most commonly used one is useQuery. This hook is used to fetch data from an API and provide it to your React component. It also tracks the loading and error states, making it easier to provide feedback to the user.

Here's an example of how to use useQuery to fetch data from an API:

1import { useQuery } from 'react-query';
2
3function MyComponent() {
4  const { data, isLoading, isError, error } = useQuery('todos', fetchTodos);
5
6  if (isLoading) return <div>Loading...</div>;
7  if (isError) return <div>Error: {error.message}</div>;
8
9  return (
10    <div>
11      {data.map(todo => (
12        <p key={todo.id}>{todo.title}</p>
13      ))}
14    </div>
15  );
16}
17
18async function fetchTodos() {
19  const response = await fetch('https://api.example.com/todos');
20  if (!response.ok) {
21    throw new Error('Network response was not ok');
22  }
23  return response.json();
24}
25

In this example, useQuery fetches a list of todos from an API endpoint. The hook automatically manages the loading and error states, which can be used to render different UI elements accordingly.

Managing Loading and Error States with React Query

One of the key benefits of using React Query is its built-in support for managing loading and error states. When you use the useQuery hook, it returns an object containing isLoading and isError booleans and an error object when there's an error fetching data.

This allows you to easily display a loading indicator while the data is being fetched and show an error message if the fetch fails. React Query also provides options for retrying failed requests and setting the conditions under which data should be refetched.

Here's how you can use these states in your component:

1function MyComponent() {
2  const { data, isLoading, isError, error } = useQuery('todos', fetchTodos);
3
4  if (isLoading) {
5    return <div>Loading...</div>;
6  }
7
8  if (isError) {
9    return <div>Error: {error.message}</div>;
10  }
11
12  // Render your data
13}
14

Displaying API Data in React Tables

Once you've fetched data from an API, the next step is to display it in a user-friendly manner. Tables are a common and effective way to present data in web applications. With its component-based architecture, React provides a clean way to encapsulate the table logic and rendering.

Structuring React Components for Data Display

You should create a dedicated table component to display data in a table within a React app. This component will render the table and its rows based on the data it receives. Here's an example of how you might structure a simple table component:

1import React from 'react';
2
3function DataTable({ data }) {
4  return (
5    <table>
6      <thead>
7        <tr>
8          <th>ID</th>
9          <th>Title</th>
10          <th>Status</th>
11        </tr>
12      </thead>
13      <tbody>
14        {data.map(item => (
15          <tr key={item.id}>
16            <td>{item.id}</td>
17            <td>{item.title}</td>
18            <td>{item.status}</td>
19          </tr>
20        ))}
21      </tbody>
22    </table>
23  );
24}
25
26export default DataTable;
27

In this DataTable component, the data prop is expected to be an array of objects, each representing a row in the table. The component maps over this data array, creating table rows for each item.

Transforming JSON Object to Table Format

The data fetched from an API is often a JSON object or an array of objects. To display this data in a table, you need to transform it into a format that the table component can understand and render.

Assuming the JSON data has been fetched and is stored in a state or passed as a prop, you can directly map it to table rows as shown in the DataTable component example above. You can do so if additional transformation is needed before passing the data to the table component.

Handling Actual Data and Error Messages

When displaying data in a table, it's important to gracefully handle both the actual data and potential error messages. This involves checking the data fetching status and determining what to render accordingly.

Here's an extended example of a component that uses React Query to fetch data and then displays it in a table, handling loading, error, and actual data states:

1import { useQuery } from 'react-query';
2import DataTable from './DataTable';
3
4function DataFetchingComponent() {
5  const { data, isLoading, isError, error } = useQuery('dataKey', fetchDataFunction);
6
7  if (isLoading) {
8    return <div>Loading data...</div>;
9  }
10
11  if (isError) {
12    return <div>Error fetching data: {error.message}</div>;
13  }
14
15  return <DataTable data={data} />;
16}
17
18async function fetchDataFunction() {
19  const response = await fetch('https://api.example.com/data');
20  if (!response.ok) {
21    throw new Error('Error fetching data');
22  }
23  return response.json();
24}
25
26export default DataFetchingComponent;
27

In this DataFetchingComponent, the useQuery hook from React Query is used to fetch data. The component renders different UI elements based on the state of the data fetching process: a loading message, an error message, or the DataTable component populated with the actual data.

Advanced Data Fetching Techniques with Axios Library

While the JavaScript Fetch API is a powerful tool for making HTTP requests, some developers prefer using the Axios library for its convenience and additional features. Axios is a promise-based HTTP client for the browser and Node.js, simplifying sending asynchronous HTTP requests to REST APIs.

Import Axios for Simplified HTTP Requests

To start using Axios in your React app, you first need to install it. You can add Axios to your project by running the following command in your project directory:

npm install axios

After installation, you can import Axios into your React component where you intend to make HTTP requests:

1import axios from 'axios';
2

Axios simplifies the process of configuring and sending HTTP requests. It automatically transforms JSON data into JavaScript objects and provides a more straightforward error handling mechanism.

Using Axios to Fetch Data from an API

Fetching data from an API using Axios is straightforward. You can use the axios.get method to send a GET request to the desired API endpoint. Here's an example of how to fetch data with Axios:

1function fetchData() {
2  axios.get('https://api.example.com/data')
3    .then(response => {
4      // Handle the response data
5      console.log(response.data);
6    })
7    .catch(error => {
8      // Handle any errors
9      console.error('There was an error fetching the data:', error);
10    });
11}
12

Axios automatically parses the JSON response, so you can directly access the response.data property to get the actual data you need.

Storing and Exporting Data with Axios

In a React app, you might want to store the data fetched by Axios in the component's state or context to make it accessible throughout your application. Here's how you can store the fetched data using the useState hook and export the function to make it reusable:

1import React, { useState } from 'react';
2import axios from 'axios';
3
4function useAxiosDataFetcher(url) {
5  const [data, setData] = useState(null);
6  const [error, setError] = useState(null);
7  const [loading, setLoading] = useState(false);
8
9  const fetchData = async () => {
10    setLoading(true);
11    try {
12      const response = await axios.get(url);
13      setData(response.data);
14    } catch (error) {
15      setError(error);
16    } finally {
17      setLoading(false);
18    }
19  };
20
21  return { data, error, loading, fetchData };
22}
23
24export default useAxiosDataFetcher;
25

In this custom hook useAxiosDataFetcher, Axios fetches data from the provided URL. The hook manages the loading state, the fetched data, and any errors that may occur during the request. It returns these states along with the fetchData function, which can be called to initiate the data fetching process.

Creating a Custom Hook for Data Fetching in React

Custom hooks in React are a powerful feature that allows you to extract component logic into reusable functions. When fetching data, a custom hook can encapsulate the entire process, including state management for the fetched data, loading states, and error handling.

The Concept of a Custom Hook

A custom hook is a JavaScript function that starts with use and can call other hooks within it. It's a way to reuse stateful logic across multiple components without changing their structure. For data fetching, a custom hook can provide a clean and efficient way to share data-fetching functionality throughout your React application.

Implementing UseFetch Custom Hook

To create a useFetch custom hook, you'll need to define a function that uses the useState and useEffect hooks from React to fetch data from an API and handle the various states of that process. Here's an example of what the useFetch custom hook might look like:

1import { useState, useEffect } from 'react';
2
3function useFetch(url) {
4  const [data, setData] = useState(null);
5  const [loading, setLoading] = useState(true);
6  const [error, setError] = useState(null);
7
8  useEffect(() => {
9    const fetchData = async () => {
10      try {
11        const response = await fetch(url);
12        if (!response.ok) {
13          throw new Error('Network response was not ok');
14        }
15        const jsonData = await response.json();
16        setData(jsonData);
17      } catch (error) {
18        setError(error);
19      } finally {
20        setLoading(false);
21      }
22    };
23
24    fetchData();
25  }, [url]); // Dependency array with URL to avoid unnecessary re-fetching
26
27  return { data, loading, error };
28}
29
30export default useFetch;
31

In this useFetch hook, useState keeps track of the data, loading state, and any errors. The useEffect hook is responsible for performing the side effect of fetching data when the component mounts or when the URL changes.

Avoiding Infinite Loops with Dependency Array

One of the challenges with the useEffect hook is avoiding infinite loops when fetching data. This can happen if the effect's dependencies change on every render, causing the effect to run again and again.

You must provide a dependency array to the useEffect hook to prevent this. This array should include all the external values that the effect depends on, and the effect will only re-run if one of these values changes. In the case of the useFetch hook, the URL is the only dependency, as shown in the example above. Including the URL in the dependency array ensures that the data is only re-fetched when the URL changes, thus avoiding an infinite loop.

Conclusion and Best Practices

Throughout this blog, we've explored various methods and tools for fetching data in React applications. From using the native JavaScript Fetch API to leveraging the powerful features of the Axios library and React Query, we've seen how each approach can be used to efficiently fetch, manage, and display data from an API.

Summarizing Fetching Logic in React Apps

Fetching data is an integral part of most React apps, and understanding how to do it effectively is key to building responsive and dynamic user interfaces. Whether using the Fetch API, Axios, or React Query, the core fetching logic involves sending an HTTP request to an API endpoint, handling the response, and updating the UI accordingly.

The Fetch API provides a straightforward way to make HTTP requests with the fetch function. At the same time, Axios offers a more feature-rich API with automatic JSON data transformation and easier error handling. React Query goes a step further by providing hooks that handle not only data fetching but also caching, synchronization, and updating server state.

Tips for Efficient API Calls

• Manage State Appropriately: Use hooks like useState and useEffect to manage the state and side effects of data fetching.
• Handle Loading and Error States: Always provide feedback to the user during the data fetching process, such as loading indicators and error messages.
• Optimize with Custom Hooks: Create custom hooks to encapsulate and reuse fetching logic across components.
• Prevent Unnecessary Requests: Use the dependency array in useEffect to prevent infinite loops and avoid fetching data more often than necessary.
• Secure API Keys: If your API requires an API key, ensure it is secured and not exposed in the frontend code.

Final Thoughts on Fetching Data and Displaying It in React Tables

Displaying data in a table is a common requirement, and React makes it easy to integrate fetched data into a table format. You can create interactive and informative tables by structuring your components correctly and handling the data transformation.

Remember to keep your components focused on their purpose. For instance, a table component should only display data, not fetching or transforming it. Use container components or custom hooks to handle data fetching and pass the data down to the table component as props.

In conclusion, fetching data and displaying it in tables is a multi-step process that can be streamlined with the right tools and practices. Following the guidelines and examples in this blog, you'll be well-equipped to handle data fetching in your React applications, resulting in clean, efficient, and user-friendly interfaces.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.