State Management

This is a solid reference for combining TanStack Query v5 with Zustand v5 in React apps, covering 26+ patterns from basic data fetching to optimistic updates. The breaking changes section up front is helpful since v5 changed `cacheTime` to `gcTime` and removed `onSuccess` from `useQuery`. I like the query keys factory pattern and the clear separation between server state (React Query) and client state (Zustand). The optimistic update examples with rollback logic are thorough. Most useful when you're setting up data fetching infrastructure or need to sync server cache with local stores. The security note about not persisting auth tokens in localStorage is worth highlighting to your team.

skills.sh installs: 834
GitHub stars: 102
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add asyrafhussin/agent-skills --skill state-management --agent claude-code

Installs into .claude/skills of the current project.

Files

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 returning new references need useShallow to avoid infinite loops

Security: Persist Middleware

Never persist auth tokens, passwords, or secrets to localStorage/sessionStorage. Use partialize to persist only non-sensitive state. Manage tokens via HttpOnly cookies.

SKILL.md on GitHub