react-state-management

Guide React state management with Context API, Zustand, Jotai, TanStack Query, and SWR.

51|10|Updated Oct 22, 2025

Search Tags:#state management #react #zustand #tanstack query #swr #jotai #context api

Ready to run

npx skills add https://github.com/JosiahSiegel/claude-plugin-marketplace --skill react-state-management-josiahsiegel

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-state-management
Source: https://github.com/JosiahSiegel/claude-plugin-marketplace/tree/main/plugins/react-master/skills/react-state-management
Command: npx skills add https://github.com/JosiahSiegel/claude-plugin-marketplace --skill react-state-management-josiahsiegel

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide and practical examples for managing state effectively in React applications, from simple component state to complex global and server state.

Core Features & Use Cases

State Management Solutions: Covers Context API, Zustand, Jotai, TanStack Query, and SWR.
Decision Guidance: Helps choose the right tool for different scenarios (local vs. global, client vs. server state).
Pattern Implementation: Demonstrates setup, optimization, and best practices like avoiding prop drilling and state normalization.
Use Case: You're building a large e-commerce app and need to decide how to manage the shopping cart, user authentication, and fetched product data. This Skill will guide you through selecting and implementing Zustand for the cart, Context for user auth, and TanStack Query for product data.

Quick Start

Use this skill to set up a Zustand store for managing global application state.

Frequently Asked Questions about react-state-management

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

FAQPage Schema

How do I choose the best React state management library for my application?▼

React state management tools differ by scope: Context API for simple global state, Zustand or Jotai for complex client state, and TanStack Query or SWR for server state. Choosing depends on whether your state is local, global, or server-fetched.

What is the best way to prevent prop drilling in a scalable React app?▼

To prevent prop drilling in a scalable React app, implement global state management solutions like Zustand, Jotai, or the Context API to access state directly in deeply nested components without passing props.

How do I set up a Zustand store for global application state?▼

Setting up a Zustand store for global application state involves creating a custom hook with the state properties and action functions. This approach avoids prop drilling and provides direct state access across components.

When should I use TanStack Query or SWR instead of Context API?▼

Use TanStack Query or SWR instead of Context API when managing server state, as they handle data fetching, caching, and synchronization. Context API is better suited for simple client-side global state like user authentication.

How do I manage user authentication and fetched product data in a large React e-commerce app?▼

For a large React e-commerce app, manage user authentication with Context API, use Zustand for the shopping cart, and handle fetched product data with TanStack Query to ensure scalable and normalized state architecture.