react-query-patterns

Server state management in React is best handled using React Query to fetch data, configure stale time, and cache responses. This approach replaces manual boilerplate with typed query keys, background refetching, and predictable cache invalidation.

Optimistic updates with React Query involve applying mutation changes to the cached data immediately before the server responds. You configure typed query keys and rollback logic within the mutation hook to reflect changes instantly and handle errors gracefully.

To configure data fetching and background refetching, initialize a QueryClient with custom retry and stale time options. Wrap your application with QueryClientProvider and use the provided hooks to automatically synchronize server state in the background.

React Query works well for infinite scroll and paginated lists by using specific hooks designed for sequential data fetching. It manages cache invalidation across lists and details automatically, ensuring UI consistency as users load more data.

Typed query keys are used in TanStack React Query to ensure correct cache invalidation and predictable data access. Structuring keys hierarchically allows precise targeting when mutations occur, preventing stale UI across dependent dashboard queries.

You should not use React Query for server state management when dealing with purely client-side data that does not require synchronization, background refetching, or complex cache invalidation. Simple local UI state is better managed with standard React hooks or local state libraries.