Server state, caching, and mutations—manage async data in React with TanStack Query.
TanStack Query treats server data as a cache. Here’s how to use it for fetching, caching, and mutations in React.
TanStack Query and React
Concepts
Queries — useQuery({ queryKey, queryFn }) fetches data. Cached by key; refetched on window focus, interval, or manually. Returns data, isLoading, error, refetch.
Mutations — useMutation for create/update/delete. On success, invalidate related queries so the cache updates. Optimistic updates with onMutate and rollback on error.
Query keys — Arrays that identify cache entries: ['users'], ['user', id]. Structure keys so invalidation is granular. Same key = same cache entry.
DevTools — TanStack Query DevTools show cache state and refetches. Invaluable for debugging.
Library usage (React data fetching):
Data fetching library (React)
Best practices
Separate server state (TanStack Query) from client state (Context, Zustand). Use query keys consistently. Prefetch on hover or route for better UX. Use suspense and error boundaries when you adopt them.
TanStack Query in 100 seconds:
Takeaway
TanStack Query removes most boilerplate for loading, error, and cache. Use it for all server data; keep UI state elsewhere. It’s the default recommendation for React data fetching.
