Using React Query
React Query is a popular library for interacting with REST APIs. The key thing it does is manage the state surrounding REST API calls. One thing that it does that React Router doesn’t is that it maintains a cache of the fetched data, which improves the perceived performance of an app.
In this section, we will refactor the app to use React Query rather than React Router’s loader capability. We will then refactor the app again to use both React Query and React Router’s loader to get the best of both these worlds.
Installing React Query
Our first job is to install React Query, which we can do by running the following command in a terminal:
npm i @tanstack/react-query
This library includes TypeScript types, so no additional package is required to be installed.
Adding the React Query provider
React Query requires a provider component in the component tree above the components that need access to the data it manages. Eventually...