React Query

Sometimes back I attended an event organized by Reactjs developer community in Kenya. As always I was looking forward to learning new concepts in the ecosystem and of course networking.

To cut the story short. One of the speakers (Maxwell Waiyaki) had a presentation on React Query. Most of us got mind blown by the presentation and the powerful features of React Query. I mean pagination infinite scrolling, caching, and deduping multiple requests have become easier. Thanks to React Query!!

That is how I got sold to React Query. Cheers!!! I decided to do in-depth research on what React Query is all about. It sounded like the newest ‘kid’ in the block.

So what exactly is React Query?? Is it the missing data-fetching library in React?? Let us find out

React Query is an asynchronous global state manager. There is no specific pattern for data fetching because React is a UI library. If data is needed throughout the whole app we tend to use state management libraries. Most of the state management libraries are good for working with client state e.g whether a modal is open or closed but not really convenient to handle server state. Server state management in React is asynchronous and the data persists remotely with no direct control. This means in order to effectively manage the state, we have to update, cache, or re-fetch the data.

React Query is an asynchronous state manager. It manages any form of asynchronous state as long as it gets back a promise

Query cache — Reduce the number of requests of data that does not change often

By default, every queried result is cached for 5 mins. RQ relies on the cached results for subsequent queries.

However, the server data might be updated and the cache might not be in sync with the client data, RQ does a background re-fetch is triggered for the same query. Fetch successfully the UI gets updated.

The isFetching flag provided by the useQuery hook helps to track the network activity.