tanstack-query-best-practices

Prevent cache collisions in React Query by structuring keys as hierarchical, serializable arrays using query key factories. This standardized approach enables precise invalidation and ensures consistent data fetching across your React application.

Handle optimistic updates in React Query by implementing onMutate snapshots to capture rollback context. This pattern ensures mutation consistency by enabling targeted invalidation and cross-component state tracking during data modifications.

Configure staleTime in TanStack Query to control when cached data is considered stale and needs refetching, while gcTime dictates when inactive query data is garbage collected. Balancing these caching policies minimizes unnecessary network requests and re-renders.

TanStack Query SSR hydration uses dehydrate and hydrate patterns to transfer server-fetched cache state to the React client. Applying these patterns prevents hydration mismatches and ensures production-ready rendering with immediately available data.

React Query mutations cause inconsistent UI states when lacking proper onMutate rollback context and targeted cache invalidation. Implementing standardized mutation flows with optimistic updates and useMutationState tracking resolves these data inconsistencies.

React Query supports offline persistence through networkMode options and intent-based prefetching strategies. These patterns allow your React application to cache data efficiently, prefetch queries before navigation, and maintain functionality during network interruptions.