react-doctor/query-stable-query-client
Move `new QueryClient()` to module scope or wrap in `useState(() => new QueryClient())` — recreating it on every render resets the entire cache
- Category: TanStack Query
- Severity: warn
- Source:
oxlint-plugin-react-doctor - Framework: tanstack-query
- Enabled when: framework=tanstack-query and capabilities=tanstack-query
Validation prompt
Use this to decide whether a fired diagnostic is real or a false positive.
Fires on new QueryClient() that appears inside an uppercase-named function or const arrow/function (a component) AND is NOT nested inside a useState, useMemo, or useRef wrapper hook. Module-scope instantiation and stable-hook-wrapped instances are correctly skipped. The class identifier must literally be QueryClient — aliased imports (new QC()) are not detected.
Fix prompt
Use this once validation confirms the diagnostic is real.
Move const queryClient = new QueryClient() to module scope, or for per-request isolation in SSR/Next.js use const [queryClient] = useState(() => new QueryClient()). The factory form keeps init lazy and per-component; a bare new QueryClient() in the body runs every render and wipes the cache. https://tanstack.com/query/latest/docs/framework/react/guides/ssr