state-management

Structure React state management across server and client boundaries with modular patterns.

Updated Dec 13, 2025

Search Tags:#architecture #context #react #patterns #zustand #state-management #tanstack-query

Ready to run

npx skills add https://github.com/imehr/vet --skill state-management-imehr

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: state-management
Source: https://github.com/imehr/vet/tree/main/.claude/skills/state-management
Command: npx skills add https://github.com/imehr/vet --skill state-management-imehr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill standardizes React state management by illustrating patterns for server state vs client state, helping teams avoid common pitfalls and duplication.

Core Features & Use Cases

TanStack Query setup for reliable server state management and caching.
Zustand stores with slices for modular, scalable client state.
Context-based dependency injection for stable values and reduced prop drilling.
Patterns for selective subscriptions to minimize re-renders.
Real-world use case: a dashboard that fetches data, manages UI state, and theme settings.

Quick Start

Create a small React app and implement a Theme toggle, server data fetch with TanStack Query, and a simple Zustand store to manage UI state.

Frequently Asked Questions about state-management

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

FAQPage Schema

How do I manage React state across server and client boundaries?▼

Separating React state across server and client boundaries requires dividing data fetching and UI concerns. Use TanStack Query for server caching and Zustand for client state to avoid duplication and ensure scalable frontend applications.

What is the best way to structure a Zustand store for scalable React applications?▼

The best way to structure a Zustand store for scalable React applications is by using modular slices. This pattern separates concerns within your client state, making the store easier to maintain and expand as your application grows.

How do I prevent unnecessary re-renders when using React Context and Zustand?▼

To prevent unnecessary re-renders with React Context and Zustand, apply patterns for selective subscriptions. This ensures components only re-render when the specific state values they depend on change, rather than on any global state update.

Does this React state management approach work with TanStack Query and Context together?▼

Yes, this approach integrates TanStack Query, Zustand, and Context together. It uses TanStack Query for data fetching, Zustand for UI state, and Context-based dependency injection to provide stable values and reduce prop drilling.

When should I use TanStack Query instead of Zustand for React state?▼

You should use TanStack Query instead of Zustand when managing server state like fetched data and caching. Zustand should be reserved for client UI state, keeping server and client boundaries distinct to avoid common state duplication pitfalls.