React Query / TanStack Query

TanStack Query (React Query) treats server state separately from UI state. `useQuery` fetches and caches by key; `useMutation` handles writes with lifecycle hooks. Built-in stale-while-revalidate, retries, pagination helpers, and devtools reduce bespoke effect code.

Configure a `QueryClient` with defaults, prefetch on navigation, and use `queryClient.invalidateQueries` after mutations. Selectors narrow subscribed data to avoid rerenders.

On interviews, explain the concept with a concrete example and name the behavior interviewers probe.

Common pitfalls include hiding data flow, over-splitting components, and putting side effects in render.

The trade-off is often clarity versus reuse or explicit props versus convenience.

Checklist:

• Query keys describe resources hierarchically.
• Mutations invalidate or update cache explicitly.
• Distinguish server state from local UI state.