What will we do?

What will we do?

We will use React Query/TanStack Query to cache the data fetched from API. The API that will be used for testing will be the Books API provided by FreeTestAPI....

What is React Query/TanStack Query?

TanStack Query is an open-source JavaScript library, formerly known as React Query, which was developed to simplify data caching, data fetching, and state management in JavaScript and its frameworks and libraries. It provides its own hooks and functions which are make very complex and annoying code to written very simple way and result in less clean code. It does all the work from handling the cache to fetching the data in the background. While in this article we’ll focus on its powerful cache feature only....

How does TanStack Query work?

TanStack query has ‘useQuery’ hook at its core which provides data fetching and caching. It behind the scene takes the data and stores its and serves it when needed, managing cache intelligently. Let’s understand it better while working on it....

Steps to Create a React App

Step 1: Create a new React.js project and install the required dependencies:-...

Conclusion

In this tutorial you learned the concept of how to use TanStack Query to cache data in React JS Website. We also got to know why caching is important and how much unnecessary requests sent to API server will be reduced, also if website is using a API plan with limited requests then this is like boon for it. Using TanStack Query makes it very easy to cache without setting up many things and you get a very nice and clean code in your project. TanStack query is much more than caching the data, you can read its documentation or read other tutorials on what else can it do....

FAQs

Is React Query and TanStack Query different?...