state-management
Master server-side data fetching and caching with React Query v5, plus client state patterns using Zustand v5. This skill covers query setup, cache invalidation, mutations, optimistic updates, and combining both libraries for complete state control.
state-management implements server state fetching and caching patterns using React Query and Zustand for efficient data management.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-05-16
state-management implements server state fetching and caching patterns using React Query and Zustand for efficient data management. Master server-side data fetching and caching with React Query v5, plus client state patterns using Zustand v5. This skill covers query setup, cache invalidation, mutations, optimistic updates, and combining both libraries for complete state control.
Use it when
- state-management distinguishes server state (fetched data managed by React Query) from client state (UI preferences.
- state-management covers cache invalidation strategies using queryClient.invalidateQueries() to mark queries stale after mutations.
Verify before relying
Read SKILL.md below before installing (32 files). Open directory: indexed for reading, not audited.
Install
AsyrafHussin/agent-skills/state-management
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do you use useQuery and useMutation in state-management?
state-management teaches useQuery for fetching and caching server data with automatic background refetching, and useMutation for handling create/update/delete operations. useQuery accepts a query key and async function, returning data, loading, and error states. useMutation lets you trigger changes and handle onSuccess/onError callbacks for side effects like cache invalidation or optimistic updates.
What's the difference between server state and client state in state-management?
state-management distinguishes server state (fetched data managed by React Query) from client state (UI preferences, forms managed by Zustand). Server state requires caching, synchronization, and invalidation strategies. Client state is local and doesn't need network sync. Combining both libraries lets you handle each appropriately: React Query for server concerns, Zustand for client-only values.
How does state-management handle react query caching and invalidation?
state-management covers cache invalidation strategies using queryClient.invalidateQueries() to mark queries stale after mutations, triggering refetches. Query keys are organized hierarchically for precise invalidation. The skill teaches cache time configuration, stale time tuning, and when to use background refetching versus immediate invalidation for optimal UX.
How do you set up Zustand store with TypeScript in state-management?
state-management shows creating typed Zustand stores with TypeScript interfaces for state and actions. Stores use create() to define state, getters, and setters. The skill covers selectors for preventing unnecessary rerenders through shallow comparison, persist middleware for localStorage, and combining multiple stores for complex applications.
What optimistic updates does state-management teach for React Query?
state-management covers optimistic updates by updating cache immediately before server confirmation, rolling back on error. You use queryClient.setQueryData() to update cache, then revert if the mutation fails. This pattern improves perceived performance. The skill also covers mutation callbacks (onSuccess, onError) for cache invalidation and side effects.
How does state-management combine React Query with Zustand?
state-management teaches integrating React Query for server data and Zustand for client state in one architecture. React Query handles fetching, caching, and synchronization; Zustand manages UI state, preferences, and auth tokens. The skill covers using Zustand's persist middleware for hydration and coordinating invalidation between both libraries for consistent state.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
State Management with React Query + Zustand
Version 1.1.0 | TanStack Query v5 | Zustand v5 | March 2026
> Note: > This document provides comprehensive patterns for AI agents and LLMs working with > TanStack Query v5 and Zustand v5. All examples are verified against v5 APIs. > Optimized for automated refactoring, code generation, and state management best practices.
v5 Breaking Changes (Quick Reference)
TanStack Query v5:
- cacheTime → gcTime
- keepPreviousData option → placeholderData: keepPreviousData (imported helper)
- isPreviousData → isPlaceholderData
- onSuccess/onError/onSettled removed from useQuery — still valid on useMutation
- suspense: true on useQuery removed → use useSuspenseQuery
Zustand v5:
- shallow as 2nd arg removed → useShallow from zustand/shallow
- Selectors
(truncated - see the full file via the links below)
File tree — 15 files
skills/state-management/AGENTS.md
skills/state-management/README.md
skills/state-management/SKILL.md
skills/state-management/metadata.json
skills/state-management/rules/_sections.md
skills/state-management/rules/_template.md
skills/state-management/rules/rq-cache-time.md
skills/state-management/rules/rq-dependent-queries.md
skills/state-management/rules/rq-enabled-option.md
skills/state-management/rules/rq-infinite-queries.md
skills/state-management/rules/rq-initial-data.md
skills/state-management/rules/rq-mutation-callbacks.md
skills/state-management/rules/rq-mutation-setup.md
skills/state-management/rules/rq-mutation-side-effects.md
skills/state-management/rules/rq-mutation-variables.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Implement server state fetching and caching with React Query”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
TanStack Query v5 handles server state management in React through data fetching, caching, and mutation patterns. Learn QueryClient setup, hook usage with the v5 object syntax, and common migration issues from v4.
TanStack Query handles server-state fetching and caching in React applications, automating data synchronization and eliminating manual boilerplate. It provides built-in background refetching, optimistic mutations, intelligent cache invalidation, and pagination support for complex data workflows.
This skill teaches you how to build and organize Zustand stores for managing shared client state across your application. It covers store structure, the recommended middleware stack (devtools, persist, immer), and how to create selector hooks for performance. Follow the patterns and validation checklist to keep stores focused, type-safe, and production-ready.
Zustand State Builder guides you through creating minimal, type-safe state stores with optional middleware for persistence, debugging, and immutable updates. Learn to structure stores for async operations, split logic into modular slices, and connect them to React components.
TanStack Query is an async state manager that handles server data fetching, caching, and synchronization in React applications. It automates cache invalidation, deduplication, background updates, and stale data management—you supply a queryFn that returns a Promise, and the library handles the rest. Use it for infinite scrolling, offline-first apps, complex cache strategies, and hybrid server/client architectures.
This skill covers expert patterns for TanStack Query in modern React with Next.js App Router, including QueryClient configuration, query key factories, cache invalidation, and optimistic updates. Learn critical anti-patterns to avoid—like singleton QueryClients on servers, unstable query keys, and N observers per list item—plus decision matrices for cache configuration and mutation strategies.
More skills tanstack-query (Apache-2.0) · App Renderer Systems (unlicensed) · State Management Expert (unlicensed) · React Native State (NOASSERTION) · tanstack-query (MIT) · react-state-management (MIT) · zustand-5 (Apache-2.0) · zustand-5 (MIT)