accelint-tanstack-query-best-practices

Prevent TanStack Query cache leakage in Next.js by using a QueryClient factory that isolates server requests per render while reusing a singleton in the browser, ensuring no cross-request data contamination.

Use deterministic query-key factories to structure TanStack Query keys, enabling hierarchical cache invalidation across server and client layers for predictable data fetching and mutation updates.

Handle safe optimistic updates in TanStack Query by implementing proper onMutate, onError, and onSettled handlers to roll back changes on failure and maintain data integrity during mutations.

Excessive TanStack Query observers impact performance when queries are not hoisted or N-queries-in-lists patterns are used, requiring observer optimization and tuning staleTime and gcTime to reduce redundant fetches.

TanStack Query caching integrates with Next.js use cache and HTTP cache in a multi-layer strategy, coordinating server-side and client-side caches to optimize data fetching performance across the stack.

Debug TanStack Query performance issues using observer-count thresholds and performance decision matrices to identify excessive observers, unstable query keys, and suboptimal staleTime or gcTime configurations.