Data Fetching Libraries and React Hooks
Last Updated :
23 Apr, 2024
Data fetching libraries like React Query and React Hooks simplify how developers fetch and manage data in React applications. These tools provide easy-to-use functions like 'useQuery' and 'SWR' that streamline API interactions and state management, improving code readability and reducing boilerplate.
By using the below libraries, we can create more efficient and responsive user interfaces while handling asynchronous data operations with ease.
Prerequisites:
Steps to Setup the React Project
Step 1: Create a reactJS application by using this command
npx create-react-app my-app
Step 2: Navigate to the project directory
cd marketplace
Step 3: Install Tailwind CSS
npm install -D tailwindcss
npx tailwindcss init
Step 4: Install the necessary packages/libraries in your project using the following commands.
npm install axios
Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"@apollo/client": "^3.9.6",
"axios": "^1.6.7",
"graphql": "^16.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-markdown": "^9.0.1",
"react-query": "^3.39.3",
"remark-gfm": "^4.0.0",
"swr": "^2.2.5"
}
}1. Using built-in Fetch API
For data fetching in React using the built-in Fetch API approach, you can use the 'fetch' function to make HTTP requests and handle responses asynchronously. You can manage the fetched data using React hooks such as `useState` to store data and loading states, and useEffect' to perform side effects like fetching data when the component mounts or updates.
Example: This example shows data fetching using built-in Fetch API.
JavaScript
// App.jsx
import { useEffect, useState } from "react";
import FetchPract from "./components/FetchPract";
export default function App() {
return (
<div>
<div>
<h1>API Examples</h1>
</div>
<div>
<FetchPract />
</div>
</div>
)
}
// FetchPract.jsx
import { useEffect, useState } from "react";
export default function FetchPract() {
const [data, setData] = useState();
const [loading, setLoading] = useState(true);
useEffect(() => {
async function fetchData() {
try {
const response = await fetch(
'https://api.github.com/repos/tannerlinsley/react-query');
const jsonData = await response.json();
setData(jsonData);
} catch (error) {
console.log(error);
} finally {
setLoading(false);
}
}
fetchData();
}, []);
if (loading) {
return <div>Loading...</div>;
}
return (
<div>
<h1>{data.name}</h1>
<p>{data.description}</p>
<strong>? {data.subscribers_count}</strong>{' '}
<strong>✨ {data.stargazers_count}</strong>{' '}
<strong>? {data.forks_count}</strong>
</div>
);
}
Output:
2. Using Axios
For data fetching in React using Axios, you can utilize the Axios library to make HTTP requests easily. Axios provides a simpler and more streamlined syntax compared to the native Fetch API, making it popular for handling data fetching and handling responses in React applications.
Installation command:
npm install axios
Example: This example shows data fetching using axios library.Use you own API to test in place of url.
JavaScript
// App.jsx
import { useEffect, useState } from "react";
import Practice from "./components/Practice";
export default function App() {
return (
<div className="m-2">
<div className="p-2 font-semibold
text-xl bg-slate-100 p-2
text-center max-w-xs
rounded-md m-2 mx-auto">
<h1>API Examples</h1>
</div>
<div>
<Practice />
</div>
</div>
)
}
// components/Practice.jsx
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Markdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
export default function Practice() {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
const options = {
method: 'GET',
url: 'your url',
headers: {
'X-RapidAPI-Key': 'Your rapidapi key',
'X-RapidAPI-Host': 'your host name'
}
};
useEffect(() => {
async function getData() {
try {
const response = await axios.request(options);
console.log(response.data.properties.description);
setData(response.data.properties.description[0]);
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
}
getData();
}, []);
if (loading) {
return
<p className='font-semibold
flex flex-col text-center
min-h-screen justify-center'>
Loading...
</p>;
}
function renderData() {
return <p>{data}</p>
}
return data && renderData();
}
Output:
axios
3. Using React Query
Data Fetching Libraries like React Query simplify API data fetching in React apps. Using React Hooks such as 'useQuery' , they offer a powerful and intuitive way for developers to manage asynchronous data fetching, caching, and state management, enhancing the performance and user experience of applications.
Install React Query:
npm install react-query
Example: This example shows data fetching using React Query.
JavaScript
// components/QueryPract.jsx
import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
export default function QueryPract() {
const { isLoading, error, data } =
useQuery('user', () =>
fetch(
'https://api.github.com/repos/tannerlinsley/react-query').then(res =>
res.json()
)
)
if (isLoading) return <div>Loading...</div>
if (error) return <div>Error</div>
return (
<div>
<h1>{data.name}</h1>
<p>{data.description}</p>
<strong>? {data.subscribers_count}</strong>{' '}
<strong>✨ {data.stargazers_count}</strong>{' '}
<strong>? {data.forks_count}</strong>
</div>
)
}
// App.jsx
import { useEffect, useState } from "react";
import QueryPract from "./components/QueryPract";
import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
const queryClient = new QueryClient();
export default function App() {
return (
<div className="m-2">
<div className="p-2 font-semibold
text-xl bg-slate-100 p-2
text-center max-w-xs
rounded-md m-2 mx-auto">
<h1>API Examples</h1>
</div>
<div>
<QueryClientProvider client={queryClient}>
<QueryPract />
</QueryClientProvider>
</div>
</div>
)
}
Output:
4. Using SWR
SWR is a data fetching library that simplifies asynchronous data fetching in React apps. It leverages React Hooks like `useSWR` for efficient data caching, revalidation, and state management, improving performance and user experience.
Install SWR:
npm install swr
Example: This example shows data fetching using SWR.
JavaScript
// components/SwrPract.jsx
import useSWR from "swr";
const fetcher = (url) => fetch(url).then((res) => {
console.log("Fetched...")
return res.json();
});
export default function SwrPract() {
const { data, error, isLoading } = useSWR(
"https://api.github.com/repos/vercel/swr",
fetcher,
{ revalidateOnReconnect: true }
);
if (error) return <div>Error</div>
if (isLoading) return <div>Loading...</div>
return (
<div>
<h1>{data.name}</h1>
<p>{data.description}</p>
<strong>? {data.subscribers_count}</strong>{" "}
<strong>✨ {data.stargazers_count}</strong>{" "}
<strong>? {data.forks_count}</strong>
</div>
);
}
// App.jsx
import { useEffect, useState } from "react";
import SwrPract from "./components/SwrPract";
export default function App() {
return (
<div className="m-2">
<div className="p-2 font-semibold
text-xl bg-slate-100 p-2
text-center max-w-xs
rounded-md m-2 mx-auto">
<h1>API Examples</h1>
</div>
<div>
<SwrPract />
</div>
</div>
)
}
Output:
5. Using GraphQL API
GraphQL APIs offer efficient data fetching with precise queries and real-time updates through subscriptions, enhancing development speed and user experience in modern web applications.
Install GraphQL:
npm install @apollo/client graphql
Example: This example shows data fetching using GraphQL.
JavaScript
// components/GraphPract.jsx
import React from 'react';
import { useQuery, gql } from '@apollo/client';
const GET_DATA = gql`
query Publication {
publication(host: "webdevelopement.hashnode.dev") {
isTeam
title
posts (first:10){
edges {
node {
title
brief
url
}
}
}
}
}
`;
const DataFetchingComponent = () => {
const { loading, error, data } = useQuery(GET_DATA);
if (data) {
console.log(data);
console.log(data.publication.posts.edges);
}
if (loading)
return <div>Loading...</div>;
if (error)
return <div>Error fetching data</div>;
return (
<div className='w-full md:max-w-lg
mx-auto m-2 rounded-md'>
{
data.publication.posts.edges.map((item, index) => {
return (
<div key={index}
className='bg-gray-100 my-2 px-4 py-2'>
<p className='text-xl font-semibold'>
{item.node.title}
</p>
<p >{item.node.brief}</p>
</div>
)
})
}
</div>
);
};
export default DataFetchingComponent;
// App.jsx
import { useEffect, useState } from "react";
import { ApolloProvider } from '@apollo/client';
import { ApolloClient, InMemoryCache } from '@apollo/client';
const client = new ApolloClient({
uri: 'https://gql.hashnode.com',
cache: new InMemoryCache(),
});
export default function App() {
return (
<div className="m-2">
<div className="p-2 font-semibold
text-xl bg-slate-100 p-2
text-center max-w-xs
rounded-md m-2 mx-auto">
<h1>API Examples</h1>
</div>
<div>
<ApolloProvider client={client}>
<GraphPract />
</ApolloProvider>
</div>
</div>
)
}
Output:
graphQL
Similar Reads
Common libraries/tools for data fetching in React Redux
In Redux, managing asynchronous data fetching is a common requirement, whether it's fetching data from an API, reading from a database, or performing other asynchronous operations. In this article, we'll explore some common libraries and tools used for data fetching in Redux applications. Table of C
3 min read
Caching Data with React Query and Hooks
If you have integrated Apis in your React js website, then you know that whenever a page is refreshed the data is re-fetched every time whether you have used useEffect to fetch data on the component mount or used some custom functions to fetch data. This results in unnecessary requests and decreased
11 min read
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 st
5 min read
Building Custom Hooks Library in React
Custom hooks in React allow developers to encapsulate and reuse logic, making it easier to manage state and side effects across multiple components. As applications become complex, developers often repeat similar patterns for state management, API calls, or event handling. This can lead to code dupl
4 min read
Context Hooks in React
Context Hooks are a feature in React that allows components to consume context values using hooks. Before Hooks, consuming context required wrapping components in Consumer or using a Higher Order Component (HOC). Context Hooks streamline this process by providing a more intuitive and concise way to
3 min read
ReactJS Integrating with Other Libraries
Integrating React JS with other libraries is a common practice in web development to utilize the functionality of those libraries. React JS is itself a JavaScript library. ReactJS workflow is like first importing the thing or component and then using it in your code, you can export your components a
2 min read
Fetching Data from an API with useEffect and useState Hook
In modern web development, integrating APIs to fetch data is a common task. In React applications, the useEffect and useState hooks provide powerful tools for managing asynchronous data fetching. Combining these hooks enables fetching data from APIs efficiently. This article explores how to effectiv
4 min read
Effect Hooks in React
Effect Hooks in React allow components to interact with and stay synchronized with external systems, such as handling network requests, manipulating the browser's DOM, managing animations, integrating with widgets from other UI libraries, and working with non-React code. Essentially, effects help co
5 min read
Building a Drag and Drop Interface with React Hooks
Drag and Drop Interface feature is a simple React application that demonstrates the drag-and-drop functionality between two boxes. The boxes represent containers and items within them can be dragged and dropped from one box to another. This interactive and user-friendly feature is commonly used in v
4 min read
Building a Component Library with React Hooks and Storybook
Building a component library is a powerful way to streamline the development process, ensure consistency across projects, and promote the reusability of UI elements. In this article, we'll explore how to create a component library using React Hooks and Storybook, a tool for developing UI components
3 min read