Use keepPreviousData for smooth paginated queries

When building pagination with TanStack Query, you might notice the UI briefly "flashes empty" while loading the next page.
That’s because the old data is cleared as soon as the query key changes.

You can fix this with keepPreviousData.
It tells Tanstack Query to keep showing the old result until the new one arrives.

import { keepPreviousData, useQuery } from '@tanstack/react-query'
 
const { data, isLoading, isFetching } = useQuery({
  queryKey: ["projects", page],
  queryFn: () => fetchProjects(page),
  placeholderData: keepPreviousData,
});

Now, when page changes:

• The old page data stays visible
• A loading spinner can still indicate fetching
• The transition feels much smoother

Perfect for paginated lists, infinite scroll, or any UI where flickering content hurts UX.