Memory leak when instantiating QueryClient per call after upgrading to React 19 / Next.js 15 ❓

[SeoSang]

Summary

Memory leak when instantiating QueryClient per call after upgrading to React 19 / Next.js 15 ❓

Hi team,

We recently upgraded our project from React 17 to React 19 and Next.js 12 to 15, while still using the Pages Router, not the App Router.

After this upgrade, we encountered a severe memory leak issue in our containerized production environment. The memory usage kept increasing over time, leading to OOMKills.

After investigation, we found that the issue was related to how we were initializing the QueryClient from @tanstack/react-query.

---

🧨 Memory leak version (per-call instantiation)

import { QueryClient, QueryClientConfig } from '@tanstack/react-query'

export const getQueryClient = () => {
  const config: QueryClientConfig = {
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
        cacheTime: 1000 * 60 * 5,
        staleTime: 1000 * 60 * 5,
      },
    },
  }
  return new QueryClient(config) // new instance each time
}

Used like this in _app.tsx:

const [queryClient] = useState(getQueryClient())

...

      <QueryClientProvider client={queryClient}>
        <Hydrate state={pageProps.dehydratedState}>
          <Component {...pageProps} />
         </Hydrate>
      </QueryClientProvider>

This worked fine before the upgrade, but after moving to React 19 and Next.js 15, it caused memory to grow uncontrollably in production.

---

✅ Fixed version (singleton instance)

import { QueryClient } from '@tanstack/react-query'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      cacheTime: 1000 * 60 * 10,
      staleTime: 1000 * 60 * 10,
    },
  },
})

export const getQueryClient = () => queryClient

This change resolved the memory issue completely.

---

📌 My question

• Why did this difference in instantiation (per-call vs. singleton) not cause issues before, but started leaking memory after React 19 / Next.js 15?
• Does React 19’s stricter render checking (e.g. useState initializer double call) or Next.js 15’s runtime behavior change make this more likely?
• Is useState(getQueryClient()) being called more frequently than expected in newer versions?
• Could this be related to some form of un-garbage-collected QueryClient internal structures (observers, cache, etc)?

We’re still using the Pages Router, so this is not related to the App Router’s cache() or use() behavior.

Would appreciate any insights or pointers. Thanks!

---

🧾 Additional information

• React version

  • Before: 17.0.1
  • After: 19.0.0

• Next.js version

  • Before: 12.1.6
  • After: 15.1.6

• React Query version
  @tanstack/[email protected]

• Routing mode
  Still using Pages Router, not App Router.

• SSR context
  QueryClient is used across both client and SSR (in _app.tsx) via useState(getQueryClient()).

• Production environment

  • Running in a Kubernetes container
  • Node.js version: 22.4.0
  • Memory usage monitored via Prometheus + Grafana

---

[SeoSang]

Thanks everyone — I’ve found the root cause and wanted to share it here before closing this discussion.

I had missed an important point in how useState works in React:
You can (and should) pass an initializer function as the initial value, but you should not pass the result of a function call directly 🚨

In my case, I was doing:

const [queryClient] = useState(getQueryClient()) // ❌

Instead, as the [React Query docs](https://tanstack.com/query/v4/docs/framework/react/guides/ssr) show for hydration setups, it should be:

const [queryClient] = useState(() => new QueryClient()) // ✅

Passing the result of the function was causing a new QueryClient to be created on each render, which eventually led to memory leaks — especially noticeable after upgrading to React 19 with StrictMode double-invoking.

Thanks again for the discussion — closing this now!