Axios/Fetch vs React Query

If you are familiar with the concept of touching grass then you're probably not aware but there's a big debate among frontend web (mainly react) developers on whether it's necessary to spend days to weeks learning a whole new framework called Tanstack Query(formerly React Query) to handle data fetching on the client side or just stick to a simple data fetching library like axios or the inbuilt fetch API.

Before I explain whether or not you should use React Query over Axios/Fetch and vice-versa, I need to first explain what the three of these technologies are.

Fetch API - is a built-in JavaScript API for modern browsers. It allows you to make network requests easily and was introduced as an alternative to XMLHttpRequest (XHR) because of its ease of use, user-friendly syntax, and support of Promises over Callbacks

Axios - is a JavaScript library used for making network requests in the browser or nodejs. It was created as an alternative to fetch (ironic) but isn't built into the browser and you'll need to install it as a separate dependency. It introduces a couple of additional features fetch doesn't have like automatically serializing objects to JSON before sending them and parsing JSON to objects after receiving them, a more straightforward API to use for data fetching, and automatically throwing an error if a fetch request doesn't return a 200 (OK) response.

Tanstack Query - is a Powerful asynchronous state management tool for TS/JS, React, Solid, Vue, Svelte and Angular.

Okay so fetch is a built-in tool for data fetching, Axios is an external library for fetch plus some features, then what exactly is stack query, and what does an "asynchronous state management tool" mean?

First Tanstack Query isn't a data-fetching library, when using it you have to define a function using fetch, Axios, or others to make network requests with tanstack query.

Tanstack Query primarily focuses on managing server state. It excels at handling asynchronous data fetching and keeping your client-side UI in sync with the latest information from your server. Here's how it does this:

• Fetching and Caching Data: Tanstack Query provides hooks to fetch data from your backend. It caches the retrieved data locally and makes it accessible on future server requests (while the data is valid).

• Automatic Updates: Whenever the server-side data changes (adding, updating or deleting data), Tanstack Query automatically refetches it and updates your UI components that rely on that data. This ensures users always see the most up-to-date information.

• Optimistic Updates: Tanstack Query can handle optimistic updates, where it simulates a UI update based on a user's action even before the server confirms the change. This creates a more responsive user experience.

Tanstack Query is able to do this by implementing a battle-tested approach for all the above which you can then use across various JavaScript libraries (if it has support for tanstack query)

Remember Data Fetching is hard. Heck, React didn't even give us a data fetching tool they basically said you have useEffect and can make network requests figure something out, so you might understand why Developers use Tanstack Query and swear it's the next best thing since Sliced Bread, but do you really need it?

The only person who can answer that question is you (or your team lead) you have to weigh your options because Tanstack Query does come with its own JS bundle which means more js will be shipped to your client and slow down your site and before using it, it takes a bit of time to learn to configure, even longer to get started with, a bit longer than that to use efficiently and much longer than to get everyone on your team to adopt and use efficiently. So if the benefits of using Tanstack Query don't outweigh the drawbacks then what's the point? If you're conflicted on whether you would benefit anything from this library or want to understand more of the features I recommend you check out these blog posts by TkDodo on why you need and why you might not need React Query.

But here's my Pros and Cons for each

Fetch

Axios

Tanstack Query

About HNG

HNG Internship is a fast-paced remote internship that helps individuals in tech gain experience without getting employment, the program focuses on using industry-standard tools to build world-class projects, and participants can expect to learn more about collaboration and get their tasks graded by professionals.
The program focuses on various fields across web and mobile development, devops engineering, product management, video marketing, product design and others.

I participated in the internship last year in their frontend path and was able to improve my skills greatly and learn new tools, I also connected with others in my field and I recommend it to anyone going into tech.

You can register at https://hng.tech/internship to gain access to the internship or https://hng.tech/premium to access their premium package which gives people additional tools to help them succeed in their careers like CV reviews, daily job postings, and weekly events.