React Query vs SWR
Tags: react, javascript, programming, aws
Published: 2023-11-12 16:51:12

To read more articles like this, [visit my blog](https://www.mdfaisal.com/blog)


Most modern web applications are dependent on some external data source. And in React, we generally use `fetch` or `axios` to get the data from the remote endpoints.

However, these 2 libraries only do so much. We still need to implement the loading state, error handling, caching, pagination, re-validation all of these things ourselves.

But there are 2 popular libraries for solving these problems. They are:

### React Query

According to the [documentation](https://react-query.tanstack.com/) what this library offers are

>  Fetch, cache and update data in your React and React Native applications all without touching any “global state”.

Another library is

### SWR

[This library](https://swr.vercel.app/) recognize itself as

>  React Hooks for Data Fetching

Today we will compare these 2 solutions and see which one is better in which scenarios.

## The common things

Let’s first talk about the common features. Both of these libraries can perform common tasks like

* Query

* Caching

* Polling

* Parallel Queries

* Initial Data

* Window focus re-fetching

* Network status re-fetching

Now let’s talk about the differences between them

## Dev tools

This is a big one. React query offers Devtools which is just awesome. We have to pass it inside the root.

```js
import { ReactQueryDevtools } from 'react-query/devtools'
 
 function App() {
   return (
     <QueryClientProvider client={queryClient}>
       {/* The rest of your application */}
       <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>
   )
 }
```

Unfortunately, SWR doesn't have any dev tools. There are some 3rd party packages that can do that though.

So this is a big win for react-query.

## Global Error Handler

We can enable Global error handling on SWR taking the help of `SWRConfig` .

To enable it we wrap our root like the following

```js
<SWRConfig value={{
  onError: (error, key) => {
    if (error.status !== 403 && error.status !== 404) {
      // We can send the error to Sentry,
      // or show a notification UI.
    }
  }
}}>
  <MyApp />
</SWRConfig>
```

But for some weird reason React query doesn't have this feature. We can achieve something like that by creating a special hook by ourselves but having official support would be awesome.

### Update

Apparently, react-query does have official support for global error handling. You have to use the `onError` of query cache in your global configuration. Like the following.

```js
const queryClient = new QueryClient({
  queryCache: new QueryCache({
    onError: (error, query) => {
     console.log(`Something went wrong: ${error.message}`)
    },
  }),
})
```

So that's a draw for this round :P

Thank you [Dominik Dorfmeister](undefined) for the correction. You can check his article on this topic [here](https://tkdodo.eu/blog/react-query-error-handling)

## Mutation Hooks

In React query we have mutation hooks by default. They are something like this

```
const mutation = useMutation(newTodo => axios.post('/todos', newTodo))
```

But in SWR we don’t have any mutation hook rather we have the option to manipulate the data manually which is not convenient as mutation hooks.

```js
import useSWR, { useSWRConfig } from 'swr'

function App () {
  const { mutate } = useSWRConfig()
  
  const onClickHandler = () => {
     logout()
     mutate('/api/user')  // invalidate the user data
  }

  return <button> Logout </button>
}
```

So this is obviously a huge win for React Query

## Bundle Size

According to [BundlePhobia](https://bundlephobia.com/) the bundle size for SWR is 15kb where the bundle size for React Query is 50kb. Which is **more than 3 times!**

![](https://cdn-images-1.medium.com/max/4900/1*9t_yGN013Z7BEssC0RgCqw.png)

![SWR vs React Query](https://cdn-images-1.medium.com/max/4900/1*V_5cVTmtCeoSszdAUHwuQQ.png)

So if you consider the size then obviously SWR wins by a large margin here!

## Garbage Collection

According to react-query documentation, all of the data that is cached is garbage collected if any query remains inactive for 5 minutes.

Also, we have the ability to configure this according to our needs by changing the `cacheTime` in the configuration option.

But in SWR there is no garbage collection. SO you have to manipulate the cache manually if you want.

So this is a win for React Query

## Final Verdict

In my opinion, both of these libraries are very good and can make the developer's life easy with improvement in the performance of the application.

However, it’s clear that react-query has some very powerful features that SWR doesn't have. But that comes with the cost of increased bundle size.

So if you are building a simple application and want a ready-to-go simple solution then SWR should be your choice.

But if you need more control and customization and want to get the most out of the developer tools then definitely go for react-query.

That’s it for today. Hopefully, now you have a better understanding of how these 2 libraries compare to each other.

Have a wonderful day!

**Get in touch with me via [LinkedIn](https://www.linkedin.com/in/56faisal/) or my [Personal Website](https://www.mdfaisal.com/).**

[https://javascript.plainenglish.io/45-npm-packages-to-solve-16-react-problems-a9ab18946224](https://javascript.plainenglish.io/45-npm-packages-to-solve-16-react-problems-a9ab18946224)