Back to Blog

Choosing a Data Fetching Library: A Look at React Query and SWR

In this article, we compare the top data-fetching libraries for Next.js - React Query and SWR. Both are popular choices with striking similarities, but they also have unique features and customization options. We'll uncover the key attributes of each and guide you through the decision-making process, taking into account their adaptability and scalability to fit your project's needs.

Choosing a Data Fetching Library: A Look at React Query and SWR

Configuration and Customization

React Query configuration is a bit more complex, especially when using it with the latest Next.js 13 app directory. Its configuration can be tricky when setting up with server components.

On the other hand, SWR requires less configuration due to its simpler API, making it easier to get started with. Its minimalist approach to configuration allows developers to quickly integrate it into their projects and start fetching data with minimal setup.


React Query offers slightly more advanced API. It has some features which are missing in SWR, such as:

  • Query cancellation: React Query supports query cancellation out-of-the-box, which means it can automatically abort unfinished requests if a user navigates away from the current view or if a new request replaces the previous one. This prevents unnecessary network traffic and reduces the load on the server. Besides that, it also prevents memory leaks when a component unmounts.
  • Offline Mutation Support: React Query allows to perform mutations even when the user is offline and automatically syncs the changes with the server once the user regains connectivity
  • Auto garbage collection: This feature helps to manage the cache by automatically removing unused data over time. This is essential for optimizing performance and preventing memory leaks.

While SWR doesn’t offer as many advanced features as React Query, it still provides essential data-fetching capabilities. It focuses on simplicity and ease of use, making it an excellent choice for projects with more straightforward data-fetching needs.

Both libraries come with features such as:

  • Request Deduplication: Avoid unnecessary network requests by automatically deduplicating identical queries.
  • Prefetching: Boost performance by preloading data in the background.
  • Parallel Queries: Enhance efficiency by running multiple queries concurrently, cutting down on the overall time it takes to fetch data.
  • Paginated/Infinite Queries: Easily manage large data sets with cursor paginated or infinite queries.
  • React Suspense: Integrate with React Suspense to create smoother user experiences while waiting for data to load.
  • Refetching: Automatically refetch data based on various triggers, such as when a user refocuses the app, at specified intervals, upon changes in network status, or in case of errors.
  • Persisting Cache: Store your cache in external locations, like local storage, to maintain a consistent state across browser sessions.

React Query comes with its own set of DevTools. These tools provide real-time insights into queries, mutations, and cache data, allowing developers to easily inspect and manage queries.

SWR, on the other hand, does not come with official developer tools. However, the developer community has risen to the challenge by creating an unofficial toolset. While it may not be as comprehensive or advanced as the React Query DevTools, the toolset still provides valuable insights into queries and data fetching.

React Query has a steeper learning curve, but its extensive features make it a powerful tool for advanced users. Once mastered, React Query can offer developers better control over their data-fetching processes.

SWR, on the other hand, is designed to be easy to understand and use right out of the box, making it an ideal choice for developers who are just starting their journey into data-fetching or who are working on projects that do not require complex data-fetching logic.

SWR’s smaller bundle size can contribute to faster initial page loads, making it a suitable choice for applications where minimizing bundle size is a priority. Its simplicity and flexibility allow for easy integration and customization, which can be beneficial for applications that don't require advanced features.

SWR’s smaller bundle size can contribute to faster initial page loads, making it a suitable choice for applications where minimizing bundle size is a priority. Its simplicity and flexibility allow for easy integration and customization, which can be beneficial for applications that don't require advanced features.

React Query is backed by Tanstack company, which is known for developing open-source projects such as TanStack table or TanStack router. It has 35.8k GitHub stars and around 1 775 000 npm downloads/week.

SWR also has a strong community and is backed by Vercel - the company responsible for creating and maintaining Next.js. It has 27.6k GitHub stars and fewer npm downloads/per week, which makes react query likely to win in this category.

Both libraries offer example projects/code snippets for developers, however, React Query has slightly better documentation, and due to its higher popularity, it may provide better support if you encounter a problem.

React Query docs:

SWR docs:

React Query SWR
Maintainer TanStack Vercel
Bundle size 13KB 4.4KB
NPM downloads/week ~1 775 000 ~1 283 000
Github stars 35.8k 27.6k
API A bit complex with more features Simple, less customizable, but enough for most use cases
Performance Features more optimizations, but for the cost of bundle size Smaller bundle size (also when compared to other popular fetching libraries)
Devtools yes (official solution) yes (unofficial solution)
Community/Documentation Bigger community / detailed documentation with more examples Fewer GitHub stars and npm downloads / sufficient documentation
Paginated/Infinite queries yes yes
Request deduplication yes yes
Prefetching yes yes
Parallel Queries yes yes
React Suspense yes yes
Cache Persistence yes yes
Auto Garbage Collection yes no
Offline Mutation Support yes no
Query Cancellation yes no

In conclusion, the choice between React Query and SWR depends on the specific requirements and complexity of your application. React Query, with its advanced features like query cancellation, automatic garbage collection, and offline mutations support, is well-suited for more complex applications. On the other hand, SWR, with its simpler API and smaller bundle size, is ideal for applications where a lightweight and flexible approach to data fetching is prioritized. Both libraries have strong community support and backing from reputable companies, making them reliable choices. It's essential to remember that more features do not always equate to a better solution. Generally, if your app's primary focus isn't client-side data fetching and it's just one aspect of your functionality, SWR is likely to be sufficient

On the other hand, if your application demands a more complex data-fetching flow with advanced features, React Query might be the better fit.

Ultimately, by evaluating the nuances of each library and considering your application's needs, you can make an informed decision that will contribute to the success of your application.

Contact us today...

to discuss your web development project and discover how our team can help you achieve your goals.

Tell us about your project

Empower your vision, partner with us today

Author photo
Jakub Czapski
Founding Partner at Blazity
To best serve you, let's get to know your requirements first. Tell us about your project, and we'll arrange a free consultation call to discuss how we can help.

Trusted by:

Trusted by logoTrusted by logoTrusted by logoTrusted by logo
Do you need an NDA first?