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
Install
JosiahSiegel/claude-plugin-marketplace/react-state-management · repository language: Shell
git clone https://github.com/JosiahSiegel/claude-plugin-marketplace
cp -r claude-plugin-marketplace/plugins/react-master/skills/react-state-management ~/.claude/skills/react-state-managementnpx skillfed install JosiahSiegel/claude-plugin-marketplace/react-state-managementFrequently 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)
Read as markdown · JSON record · Browse the source repository
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