TanStack

Use the selected TanStack libraries for their specific data and routing contracts. Avoid maintaining an accidental second copy of shared server state in component state.

Apply the libraries already chosen by the project. This skill does not require migrating a working framework loader or adding the entire TanStack stack. Form drafts may intentionally start from server data and diverge while the user edits.

The core mental model

• Server state ≠ client state. Data owned by the server (lives in a DB, can change, is shared) belongs in TanStack Query, not useState.
• Reserve useState/useReducer for true UI state (open/closed, input draft, selection).
• Prefer Query or Router for shared server data. Preserve justified effect-based integrations with appropriate race handling and cleanup.

TanStack Query (server state)

• useQuery for reads; it handles caching, dedup, background refetch, loading/error states.
• Use stable, structured query keys (['todos', { status }]). Keys are the cache identity.
• Set staleTime intentionally — how long data is "fresh" before background refetch. Default 0 refetches often; raise it for stable data.
• Co-locate query options in a factory so keys/fns stay consistent and reusable across components and route loaders.