The QueryClient contains the QueryCache, so you'd only want to create one instance of the QueryClient for the lifecycle of your application - not a new instance on every render.
Exception: It's allowed to create a new QueryClient inside an async Server Component, because the async function is only called once on the server.
Examples of incorrect code for this rule:
/* eslint "@tanstack/query/stable-query-client": "error" */
function App() { const queryClient = new QueryClient() return ( <QueryClientProvider client={queryClient}> <Home /> </QueryClientProvider> )}Examples of correct code for this rule:
function App() { const [queryClient] = useState(() => new QueryClient()) return ( <QueryClientProvider client={queryClient}> <Home /> </QueryClientProvider> )}const queryClient = new QueryClient()function App() { return ( <QueryClientProvider client={queryClient}> <Home /> </QueryClientProvider> )}async function App() { const queryClient = new QueryClient() await queryClient.prefetchQuery(options)}“This course is the best way to learn how to use React Query in real-world applications.”—Tanner LinsleyCheck it out
