Implement React Query and Zustand patterns for server and client state.
npx skills add https://github.com/cenjie/skills --skill state-management-cenjie
Please help me install this Agent Skill. Skill: state-management Source: https://github.com/cenjie/skills/tree/main/skills/state-management Command: npx skills add https://github.com/cenjie/skills --skill state-management-cenjie
Provides clear, production-oriented patterns to implement, maintain, and refactor server and client state in React applications so teams avoid cache collisions, inconsistent local state, and fragile mutation logic.
Apply the state-management patterns to audit and improve data fetching, caching, mutation handling, and Zustand stores in your React project.
High-intent search queries and answers about installing and using this skill.
React Query cache collisions are avoided by using query key factories—structured functions that generate hierarchical keys for each query. This pattern ensures targeted invalidation and consistent caching across server state in React applications.
Optimistic updates with React Query use onMutate to cache pre-mutation data, onError to rollback on failure, and onSettled for invalidation. This workflow provides immediate UI feedback while maintaining data consistency.
Zustand manages local UI state while React Query handles server state like fetched and cached data. Use Zustand for client-side interactions, persist middleware, and devtools, combining both for hybrid state architectures.
Infinite and paginated queries in React Query require TypeScript typing, proper query function structure, and configured staleTime and gcTime strategies. These patterns support dependent and parallel queries alongside prefetching.
React Query integrates with Suspense and ErrorBoundary for declarative data fetching. This approach handles loading and error states at the component tree level, streamlining async UI rendering in React applications.
flaviogragnolatiAutomate Zustand store setup with TypeScript and middleware in React.
fellipeutakaManage server data fetching and cache synchronization in React applications.
george-popescuDefine React 19 development conventions for components, hooks, state, routing, and testing.
fgarofalo56Guide React state management with Zustand, Redux Toolkit, Jotai, and React Query.
