react-state-management
React State Management guides you through selecting and implementing the ideal state solution for your architecture. It covers built-in hooks, Context optimization, and third-party libraries like Zustand, Jotai, TanStack Query, and SWR—helping you avoid prop drilling and scale effectively.
React State Management helps you choose between Context, Zustand, Jotai, TanStack Query, and SWR for your project.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-06-18
React State Management helps you choose between Context, Zustand, Jotai, TanStack Query, and SWR for your project. React State Management guides you through selecting and implementing the ideal state solution for your architecture. It covers built-in hooks, Context optimization, and third-party libraries like Zustand, Jotai, TanStack Query, and SWR—helping you avoid prop drilling and scale effectively.
Use it when
- React State Management explains that useState works best for simple, independent state values.
- React State Management teaches several techniques to eliminate prop drilling.
Verify before relying
Read SKILL.md below before installing (3 files). Open directory: indexed for reading, not audited.
Install
JosiahSiegel/claude-plugin-marketplace/react-state-management · repository language: Shell
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How to manage state in React effectively?
React State Management covers multiple approaches depending on your needs. For simple local state, use useState. For complex logic, useReducer works well. Context API suits global state but needs optimization to prevent unnecessary re-renders. For scalability, Zustand and Jotai offer lightweight alternatives. TanStack Query and SWR handle server state and data fetching separately, keeping your architecture clean and performant.
What's the difference between useState and useReducer?
React State Management explains that useState works best for simple, independent state values. useReducer suits complex state with multiple related fields or intricate update logic. useReducer gives you a predictable state machine pattern, making it easier to debug and test. Choose useState for straightforward cases; switch to useReducer when your state transitions become complicated or interdependent.
How do I avoid prop drilling in React?
React State Management teaches several techniques to eliminate prop drilling. Context API works for moderate needs but requires careful optimization. Zustand and Jotai provide lightweight global stores without the re-render overhead. TanStack Query isolates server state, reducing what you pass through props. Normalize your state structure and keep related data together to minimize the props you need to thread through component trees.
When should I use Zustand or Jotai for state?
React State Management guides you through both options. Zustand offers a simple, store-based API ideal for global client state with minimal boilerplate. Jotai uses atomic state, better for fine-grained reactivity and smaller bundle sizes. Choose Zustand for straightforward global stores; pick Jotai if you need granular updates or prefer atom-based composition. Both beat Context API for performance in large apps.
How does TanStack Query handle server state?
React State Management shows that TanStack Query separates server state from client state, handling caching, synchronization, and background updates automatically. It manages request deduplication, stale-while-revalidate patterns, and optimistic updates. Use it alongside Zustand or Jotai for a complete solution: TanStack Query for remote data, Zustand/Jotai for client state, avoiding mixed concerns and improving maintainability.
How can I optimize Context API to reduce re-renders?
React State Management teaches optimization strategies for Context API. Split contexts by concern—separate frequently-changing values from static ones. Use useMemo to memoize context values. Combine with useCallback for callbacks. Consider useReducer inside a context for complex state. For large apps, these optimizations often aren't enough; Zustand or Jotai provide better performance without the overhead of manual memoization.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
Quick Reference
| Library | Best For | Install |
|---|---|---|
| Context | Small apps, themes | Built-in |
| Zustand | Simple global state | npm i zustand |
| Jotai | Atomic/granular state | npm i jotai |
| TanStack Query | Server state/caching | npm i @tanstack/react-query |
| SWR | Data fetching | npm i swr |
| Scenario | Recommended |
|---|---|
| Simple local state | useState |
| Complex local state | useReducer |
| Shared state (small app) | Context + useReducer |
| Shared state (large app) | Zustand or Jotai |
| Server state | TanStack Query or SWR |
When to
(truncated - see the full file via the links below)
File tree — 3 files
plugins/react-master/skills/react-state-management/SKILL.md
plugins/react-master/skills/react-state-management/references/jotai-and-tanstack-query.md
plugins/react-master/skills/react-state-management/references/zustand-patterns.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Choose the right state management tool for my React project”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Get expert guidance on choosing and implementing the right state solution for your React app. This skill covers Redux Toolkit for complex global state, Zustand for lightweight stores, TanStack Query for server data, and Context API for simple cases, plus patterns to avoid common pitfalls.
Comprehensive guide to React state management covering local component state, global stores, and server state synchronization. Compares Redux Toolkit, Zustand, Jotai, and React Query with selection criteria and best practices for each approach.
Master state management by understanding which tool fits each scenario: Zustand for straightforward global state, Jotai for fine-grained atomic updates, and Context for dependency injection. This skill covers practical patterns, including how to structure complex stores with slices, leverage derived atoms, and keep server data separate using TanStack Query.
This skill guides you through the full spectrum of state management approaches in React and Next.js, from component-level useState to Zustand-based global stores. You'll learn decision frameworks for choosing the right pattern—whether that's URL state for shareable filters, server components for database queries, or Context for simple app-wide settings. The skill also covers form handling with React Hook Form and performance optimization through selective subscriptions.
Zustand State Builder guides you through creating minimal, type-safe state stores with optional middleware for persistence, debugging, and immutable updates. Learn to structure stores for async operations, split logic into modular slices, and connect them to React components.
Set up production-ready state management using Redux Toolkit, Zustand, MobX, or Context API with useReducer. Choose the right pattern for your app's complexity, from lightweight stores to full-featured solutions with time-travel debugging and async handling.
More skills state-management (MIT)