tanstack-query

To fetch and cache server-state data in React, configure a QueryClient, wrap your app in QueryClientProvider, and use the useQuery hook with a queryKey and queryFn. This provides automatic stale and refresh behavior for predictable UI updates.

To keep cached async data in sync after a mutation, use query invalidation on hierarchical query keys. Invalidating specific query keys automatically triggers background refetching to update dependent views with the latest server-state data.

Implement optimistic updates for UI mutations by applying mutation lifecycle patterns that update the UI immediately while safely rolling back changes on errors. This ensures a responsive user experience during server-state synchronization.

Yes, you can use TanStack Query for paginated lists and infinite scrolling. It manages server-state synchronization for these scenarios by handling query keys and query functions with cancellation via signal to maintain consistent cached data.

You need query functions with cancellation via signal when fetching async server-state data in React to prevent race conditions. This pattern ensures outdated network requests are properly canceled when new queries are triggered or components unmount.