Rendering paginated data is a very common UI pattern and in React Query, it "just works" by including the page information in the query key:
However, if you run this simple example, you might notice something strange:
The UI jumps in and out of the
loading states because each new page is treated like a brand new query.
This experience is not optimal and unfortunately is how many tools today insist on working. But not React Query! As you may have guessed, React Query comes with an awesome featured called
keepPreviousData that allows us to get around this.
Consider the following example where we would ideally want to increment a pageIndex (or cursor) for a query. If we were to use
useQuery, it would still technically work fine, but the UI would jump in and out of the
loading states as different queries are created and destroyed for each page or cursor. By setting
true we get a few new things:
datais seamlessly swapped to show the new data.
isPreviousDatais made available to know what data the query is currently providing you
While not as common, the
keepPreviousData option also works flawlessly with the
useInfiniteQuery hook, so you can seamlessly allow your users to continue to see cached data while infinite query keys change over time.