tanstack-query-expert

Asynchronous state management in React is handled by centralizing data fetching with TanStack Query v5. You derive state from query data during render, avoiding useEffect for data fetching to ensure robust, production-grade synchronization.

Typed query keys and factories structure cache invalidation in TanStack Query by creating declarative, strongly-typed identifiers. This ensures precise cache invalidation and robust state management across complex React and Next.js applications.

SSR hydration with TanStack Query in a Next.js App Router setup is implemented by wiring typed custom hooks into App Router pages. This enables server-side rendering hydration for robust asynchronous data loading.

Suspense-based data loading and optimistic updates work together in React using TanStack Query v5. It supports useSuspenseQuery for loading states alongside optimistic mutations for immediate UI updates.

Infinite queries and error retry strategies are managed in React applications using TanStack Query v5. It provides useInfiniteQuery for paginated data and built-in patterns for robust error handling and retries.

You should not use useEffect for data fetching in modern React applications when managing complex asynchronous state. Deriving state from query data during render with TanStack Query provides scalable caching, synchronization, and error handling.