StatusNeo

React Query vs SWR: Which data-fetching solution is right for you?

React Query vs SWR: The basics

 In the world of front-end development, there are a lot of debates around different technologies and how they should be used. One such debate is around data fetching libraries for React. The two most popular options are React Query and SWR. Both React Query and SWR are libraries that were created to help with data fetching in React applications. React Query is a library for fetching, caching, and managing data in React applications. It includes features like query caching, deduplication, request cancellation, and pagination. React Query is heavily inspired by Relay and Apollo Client. SWR is a library for efficiently fetching data from an API. It includes features like caching, deduplication, and pagination. SWR is heavily inspired by various Reddit clients (like Apollo).

So what’s the difference between these two libraries? Let’s take a closer look…

Caching:

Both React Query and SWR support caching out of the box. However, where they differ is in the granularity of their caching implementations. React Query lets you fine-tune your caching so that you can cache at the component level, whereas with SWR you cache at the route level. This means that if you’re using SWR and you have a page with multiple routes, each route will have its own separate cache. This can lead to duplicated requests if you’re not careful.

Deduplication:

React Query and SWR both support deduplication out of the box. Deduplication ensures that if you make the same request multiple times, only a single network request will be made. This can be useful if you have a component that makes multiple requests on mount (for example, if it fetches data from multiple API endpoints). By default, both libraries will use a short time window (5 seconds for React Query and 1 second for SWR) to deduplicate requests.

Request Cancellation:

React Query supports request cancellation out of the box. This means that if you make a request and then unmount the component before the response comes back, React Query will automatically cancel the request so that you don’t end up with stale data in your UI. With SWR, there is no built-in support for request cancellation—however, there is an open issue for it on GitHub.

Pagination:

Both React Query and SWR support pagination out of the box. They each have their own APIs for pagination which are very similar. The main difference is that with React Query you need to specify which page of results you want when making your initial query (for example, page 1 or page 2), whereas with SWR there is an API for automatically fetching the next page of results when necessary.

React Query vs SWR: Features

One of the biggest differences between React Query and SWR is the features each library offers. React Query provides features like automatic retries, refetch on interval, caching/suspense integration, cancelation tokens, global state management, SSR support, and more. SWR, on the other hand, focuses mainly on providing hooks for remote data fetching. While it does offer some caching features, they are not as robust as those offered by React Query.

React Query vs SWR:Performance

When it comes to performance, both React Query and SWR are fast and effective at fetching data from APIs. However, where they differ is in how they handle re-rendering components. With React Query, components will only re-render when the data that they need has been fetched (or if an error has occurred). With SWR, components will always re-render when new data is fetched from the API— even if the component doesn’t need to use that data. This can lead to unnecessary re-renders and lower performance in some cases.

React query vs SWR: Ease of use

When it comes to ease of use, there is a slight learning curve with both libraries. However, once you get familiar with the basics of each library they are both fairly easy to use. In terms of documentation, React query has more comprehensive documentation than does SRW.  docsthat walks you through all of the steps necessary to get started with the library.  On the other hand, while  SRW’s documentation is not as comprehensive as that of  React query , it does provide helpful examples that can be used to get started with the library quickly .  At the end of the day , both libraries are easy enough to use once you get familiar with them .  However ,  React query’s comprehensive documentation may make it slightly easier for newcomers to get started .   Whichever librarie you choose to proceed with, making sure you refer to the official documentation frequently is key so that you don’t run into any issues.    

React Query vs SWR: The Pros and Cons

React Query:

-Pros:

• Developed by the same team that created React Apollo (another popular data fetching library), so it has a lot of pedigree behind it.
• integrates really well with React suspense/concurrent mode (new feature in React that allows components to “suspend” rendering until certain conditions are met). This can give your app a major performance boost.
• includes features like caching and error handling out of the box, which means less code for you to have to write yourself.

-Cons:

• doesn’t have as many features as some of the other options out there (like SWR).
•  because it’s newer, there isn’t as much documentation available yet.

SWR:

-Pros:

• has more features than React Query (like polling and pagination).
• better documentation thanks to its longer tenure in the open source world.
• integrates well with existing APIs (like REST).

-Cons:

• not as performant as React Query due to its reliance on virtual DOM diffing (a process where the differences between two DOMs are calculated so that only the changed parts need to be re-rendered).
• trying to use suspense/concurrent mode with SWR can lead to unpredictable results (though this may change in future versions as they continue to work on integrating those features).

How to Use React Query?

Installation:

Using React Query is relatively simple. First, you need to install it into your project using either NPM or Yarn. Then, you can create a new instance of ReactQuery in your component:

Requirements:

React Query is optimized for modern browsers. It is compatible with the following browsers config

Code Example:

This code snippet very briefly illustrates the 3 core concepts of React Query:

• Queries
• Mutations
• Query Invalidation

How to use SWR?

Installation:

Inside your React project directory, run the following:

Code Example:

For normal RESTful APIs with JSON data, first you need to create a fetcher function, which is just a wrapper of the native fetch:

Then you can import useSWR and start using it inside any function components:

Conclusion:

In conclusion, there are two popular libraries for data fetching in React: React Query and SWR. They take different approaches to data fetching, but both libraries include features like caching, deduplication, and pagination out of the box. So which one should you use? It depends on your project requirements. If you need fine-tuned control over your caching implementation or if you need built-in support for request cancellation, then React Query might be a better fit for your project. However, if you’re looking for a simpler API or automatic pagination support, then SWR might be a better choice.

Reference:

• https://swr.vercel.app/
• https://tanstack.com/query/v4/?from=reactQueryV3&original=https://react-query-v3.tanstack.com/