skills.rest
aussiegingersnap
aussiegingersnapCOMMUNITY
Explore all skills by this author →
𝕏@jasontoevsGitHub

state-tanstack

Orchestrate React server and client state with Tanstack Query and Zustand.

9|2|Updated Jan 31, 2026
Search Tags:#react#zustand#state-management#tanstack-query#data-fetching#ui-state
One-click install
npx skills add https://github.com/aussiegingersnap/cursor-skills --skill state-tanstack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: state-tanstack
Source: https://github.com/aussiegingersnap/cursor-skills/tree/main/skills/state-tanstack
Command: npx skills add https://github.com/aussiegingersnap/cursor-skills --skill state-tanstack

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Coordinate and synchronize server and client state in React applications, reducing boilerplate and keeping data consistent across UI and network layers.

Core Features & Use Cases

  • Tanstack Query integration for robust data fetching, caching, and background updates.
  • Zustand stores for UI state and local drafts.
  • Pattern examples for query keys, providers, and selectors to promote consistency and reusability.
  • Real-world use case: building a dashboard that fetches data with Tanstack Query while managing modal states with Zustand.

Quick Start

Install @tanstack/react-query and zustand, then wrap your app with a QueryProvider to enable both server and client state management.

Frequently Asked Questions about state-tanstack

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I manage server and client state together in React without sync issues?▼

Coordinating server and client state requires routing server data through Tanstack Query and UI state through Zustand, enforcing separation of concerns to keep data consistent across network and UI layers.

What is the best way to structure Tanstack Query and Zustand in a data-heavy dashboard?▼

The best way to structure Tanstack Query and Zustand is using clear provider and store patterns, routing data fetching and caching through Query while managing local drafts and modal states via Zustand.

Does Tanstack Query work with Zustand for managing local drafts and UI state?▼

Yes, Tanstack Query works with Zustand by handling robust data fetching and background updates while Zustand manages UI state and local drafts, ensuring both server and client state stay synchronized.

How do I set up unified state management with Tanstack Query and Zustand?▼

To set up unified state management, install @tanstack/react-query and zustand, then wrap your React application with a QueryProvider to enable both server data fetching and client state management.

When should I separate server data fetching from UI state in React applications?▼

You should separate server data fetching from UI state when building data-heavy dashboards and forms, ensuring background updates and local drafts remain consistent without boilerplate synchronization code.

Why does my React application have inconsistent state between fetched data and local UI components?▼

Inconsistent state occurs when server data and local state are not properly separated; using Tanstack Query for data caching and Zustand for UI state enforces clear boundaries to keep both layers consistent.

Related Skills

Explore More Software Engineering Skills→
gileckgileck

state-management-guidelines

Standardize state management with React Query, Zustand, and useState.

Community
Advanced
AsyrafHussinAsyrafHussin
62

state-management

Coordinate server state with React Query and local UI state with Zustand.

Community
Advanced
timequitytimequity
6

frontend-react

Automate React frontend development with TypeScript, Tailwind CSS, Vite, Zustand, and TanStack Query.

Official
Advanced
kyamsSRLkyamsSRL

react-state-management

Manage React state across local, global, and server data.

Community
Intermediate