Pagination state resets on back navigation when syncing TanStack Query with React Router URL params

Answer

Make the URL search parameter the single source of truth for the current page. Read page with useSearchParams, include it in the TanStack Query key, and let the query cache own only the fetched pages. Do not initialize a local page state to 1, because back navigation restores the URL but not local state, so the list restarts at page 1.

Confirmed facts

• React Router v6 useSearchParams survives back and forward navigation for the same route instance.
• TanStack Query caches by query key; if page is not in the key, pages collide and stale data can be shown.
• keepPreviousData keeps the previous page visible while a new page loads; it does not change the cache key.
• select transforms cached data for the view; it does not persist pagination or change the query key.
• react-virtual restores container scroll only if you explicitly restore it after the container and items are measured.

Likely explanation

The reset happens when the component reads page from local state or when setSearchParams causes a remount. Back navigation restores the URL, but a remounted component re-initializes page to its default and useInfiniteQuery starts a fresh query at page 1.

Steps for this case

1. Read the page from the URL:

const [searchParams, setSearchParams] = useSearchParams();
const page = Number(searchParams.get('page') || '1');

2. Use the page in the query key. For one-page-per-request pagination with useInfiniteQuery, fetch only the current page:

const { data, isFetching } = useInfiniteQuery({
  queryKey: ['items', page],
  queryFn: () => fetchPage(page),
  initialPageParam: page,
  getNextPageParam: () => undefined,
  keepPreviousData: true,
  select: (result) => result.pages.flatMap((pageData) => pageData.items),
});

3. Change pages without cluttering history and without remounting the list:

function goToPage(nextPage) {
  setSearchParams((prev) => {
    prev.set('page', String(nextPage));
    return prev;
  }, { replace: true });
}

4. Restore virtual-list scroll. Save offset on scroll and restore after data loads:

const scrollKey = `scroll:${window.location.pathname}${window.location.search}`;
const containerRef = useRef(null);
const virtualizerRef = useRef(null);

useLayoutEffect(() => {
  const el = containerRef.current;
  if (!el) return;
  const onScroll = () => sessionStorage.setItem(scrollKey, String(Math.round(el.scrollTop)));
  el.addEventListener('scroll', onScroll, { passive: true });
  return () => el.removeEventListener('scroll', onScroll);
}, [scrollKey]);

useEffect(() => {
  if (!data || !containerRef.current || !virtualizerRef.current) return;
  const saved = sessionStorage.getItem(scrollKey);
  if (saved !== null) {
    const offset = Number(saved);
    containerRef.current.scrollTop = offset;
    virtualizerRef.current.scrollToOffset(offset, { align: 'start' });
  }
}, [data, scrollKey]);

5. Use stable item keys such as item.id, not array indices, so selection survives insert and delete. If select returns a new array each render, still derive row keys from item.id, not position.

Assumptions

Assumes client-side React Router v6 navigation, TanStack Query v5, a fixed-height react-virtual container, and stable item IDs. If you use React Router v6 loaders, derive page in the loader and pass it into the same query key; the loader preloads data but does not replace the URL as the source of truth. Verify loader behavior if you are using server-side rendering.

Verification

1. Run npm ls @tanstack/react-query react-router-dom react-virtual to confirm major versions.
2. Click a pagination link and confirm the URL page param updates without a full reload.
3. Use React DevTools to confirm the query key contains page and keepPreviousData is enabled.
4. Navigate forward and back; confirm sessionStorage scroll offset matches the virtual container scrollTop before unmount.
5. Temporarily disable keepPreviousData; the page should blank or show a placeholder while loading, confirming it was preserving the previous page.

Missing diagnostic: does back navigation keep the same route and component instance, or does the list remount under a new route or key? If it remounts, fix the route structure first because URL sync alone cannot preserve scroll across a remount.