TanStack Query best practices

Use when using TanStack Query (@tanstack/react-query) for server state, caching, and mutations.

Query keys and data ownership

• Use stable, descriptive query keys (include variables that define the resource).
• Keep server state in TanStack Query, not duplicated in local component state or global UI stores.

Freshness and fetching

• Set sensible staleTime to reduce unnecessary refetching for data that doesn’t change often.
• Use select to transform or narrow data close to the query consumer.

Mutations

• Use mutations for writes; invalidateQueries (or precise updates) for affected reads after success.
• Prefer optimistic updates only when rollback is clear and safe.