state-management-expert

Guide React state architecture decisions with TanStack Query, Zustand, and Redux Toolkit.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/phuxp17/demo_web --skill state-management-expert-phuxp17
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: state-management-expert
Source: https://github.com/phuxp17/demo_web/tree/main/.agent/skills/state-management-expert
Command: npx skills add https://github.com/phuxp17/demo_web --skill state-management-expert-phuxp17

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams architect robust, scalable React state management, guiding the selection of libraries (Redux Toolkit, Zustand, Jotai, React Query/TanStack Query, and Context API) to solve complex state challenges while maintaining performance and maintainability.

Core Features & Use Cases

  • Guides when to use global UI state vs server state and which library fits each scenario.
  • Provides practical patterns for Redux Toolkit, Zustand, Jotai, React Query, and Context API with example scenarios.
  • Includes a decision tree to choose an approach based on state type and performance considerations.
  • Use Case: large forms, real-time dashboards, and API-driven UIs.

Quick Start

Analyze a React project's state needs and propose a recommended state-management approach with a minimal implementation outline.

Frequently Asked Questions about state-management-expert

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

FAQPage Schema
How do I choose between Redux Toolkit and Zustand for React state management?▼

Choosing between Redux Toolkit and Zustand for React state management depends on your app's scale. Redux Toolkit suits complex, large-scale global state, while Zustand offers a lighter API for minimal boilerplate in smaller global UI state scenarios.

When should I use TanStack Query instead of Context API for server state?▼

Use TanStack Query instead of the Context API for server state when fetching API-driven data. TanStack Query handles caching, synchronization, and background updates, whereas Context API is better suited for simple local UI state without frequent re-renders.

What is the best way to structure scalable React state architecture for real-time dashboards?▼

The best way to structure scalable React state architecture for real-time dashboards is to separate server state using TanStack Query and manage global UI state with Zustand or Redux Toolkit, guided by a decision tree for optimal performance.

Does Jotai work well for managing large forms in React applications?▼

Jotai works well for managing large forms in React applications by providing an atomic state model. This approach ensures fine-grained re-renders, preventing performance bottlenecks when individual form fields update independently.

Can I mix local Context hooks with global state libraries in a single React project?▼

You can mix local Context hooks with global state libraries like Redux Toolkit or Zustand in a single React project. Use Context for low-frequency UI state and global libraries for high-performance or complex shared state requirements.

Why does my React app re-render excessively when using Context API for state management?▼

Your React app re-renders excessively with the Context API because any state update triggers re-renders for all consuming components. Moving to Zustand, Jotai, or Redux Toolkit provides selective subscriptions to prevent unnecessary renders.