useQueries slow and freeze browser with 2000 queries

[bilalbhojani24]

Problem

• I'm experimenting with migrating a large global cache system to React Query. During testing, I tried loading 2000+ role records, each mapped to its own query.
• However, using useQueries with 2000 queries completely freezes the browser as soon as queries are enabled.
• This happens even when the queryFn is trivial (e.g., Promise.resolve({ id })). It also happens with devtools closed.
• I want to understand whether this is expected, if this is a limitation, and what the recommended architecture is for large datasets.

Reproduction Code

import React from 'react';
import { createRoot } from 'react-dom/client';
import { QueryClient, QueryClientProvider, useQueries } from '@tanstack/react-query';
import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools';

function PageLoad() {
  const [enabled, setEnabled] = React.useState(false);

  const data = useQueries({
    queries: Array.from({ length: 2000 }, (_, i) => ({
      queryKey: ['role', i],
      queryFn: () => Promise.resolve({ id: i }),
      enabled,
    })),
  });

  console.log(data);
  const isLoading = data.some((q) => q.isLoading);

  return (
    <>
      <h1>Page Load</h1>
      <button onClick={() => setEnabled(true)} disabled={isLoading}>
        Enable
      </button>
    </>
  );
}

const queryClient = new QueryClient();

const Test = () => (
  <QueryClientProvider client={queryClient}>
    <PageLoad />
    <ReactQueryDevtoolsPanel
      initialIsOpen={true}
      panelPosition="bottom"
      style={{
        height: '400px',
        position: 'absolute',
        bottom: 0,
        width: '100%',
      }}
    />
  </QueryClientProvider>
);

createRoot(document.getElementById('root')).render(<Test />);

Behaviour observed

• Once setEnabled(true) is called, the browser freezes.
• JS thread spikes to 100%.
• No network requests involved.
• Devtools also freezes due to rendering 2000 entries.

Questions for the Team

1. Is React Query designed to support thousands of concurrent queries in a single useQueries call?
2. Is there a recommended architectural pattern for cases involving 2000–5000 records?

Note
I also observed something similar with ensureQueryData, fetchQuery and restoreQueries of persister.

[TkDodo]

https://stackblitz.com/edit/tanstack-query-tujlrb9g?file=src%2Findex.tsx&preset=node

There is a slight delay when rendering 2k elements. Performance profile shows about 700ms of scripting time, some of it react rendering related.

I think this is fine? There’s absolutely no delay for 1k elements, which is about what I would recommend for concurrent observers.

When scaling, most time is spend doing setTimeout calls for staleTime and gcTime. In those cases, it’s recommended to provide your own timeoutManager and use something like timer-wheel to optimize it.

https://tanstack.com/query/latest/docs/reference/timeoutManager