Fetching data in React using XMLHttpRequest and Fetch API is fine but require a lot of boilerplate codes. Using a data fetching library is preferred as following solutions will simplify the logic of data fetching in your project with tons of amazing built-in features.
Axios (100k β) β A promise-based isomorphic HTTP client which can run in the browser and NodeJS with the same codebase. On the server-side it uses the native NodeJS http module, while on the browser it uses XMLHttpRequests.
React Query (34.7k β) β A library handles fetching, caching, background updates and stale data out of the box with zero-configuration. It is backend agnostic so you can use React Query with literally any asynchronous data fetching client.
SWR (26.8k β) β A React Hooks library for data fetching, created by Next.js team, lightweight, and backend agnostic.
Apollo Client (18.7k β) β A comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. Use it to fetch, cache, and modify application data, all while automatically updating your UI.
Relay (17.8k β) β The production-ready GraphQL client for React, developed by Facebook, was designed to be performant from the ground up, built upon locally declaring data dependencies for components.
RTK Query (9.5k β) β An optional addon included in the Redux Toolkit package, and its functionality is built on top of the other APIs in Redux Toolkit.
urql (8k β) β A highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
Wretch (4k β) β A small wrapper around Fetch API designed to simplify the way to perform network requests and handle responses. Itβs strongly typed, written in TypeScript, compatible with modern browsers, Node.js 14+ and Deno.
Web applications normally need to fetch data from a server in order to display it. They also usually need to make updates to that data, send those updates to the server, and keep the cached data on the client in sync with the data on the server. This is made more complicated by the need to implement other behaviors used in todayβs applications:
React data fetching libraries provide convenient abstractions and utilities to handle data fetching and management in React applications. While the specific features can vary between libraries, here are some common features found in many React data fetching libraries: