{"enrichment":{"faq":[{"a":"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.","q":"How to manage state in React effectively?"},{"a":"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.","q":"What's the difference between useState and useReducer?"},{"a":"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.","q":"How do I avoid prop drilling in React?"},{"a":"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.","q":"When should I use Zustand or Jotai for state?"},{"a":"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.","q":"How does TanStack Query handle server state?"},{"a":"React State Management teaches optimization strategies for Context API. Split contexts by concern\u2014separate 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.","q":"How can I optimize Context API to reduce re-renders?"}],"shadow_tags":["client-side-state","server-state-sync","re-render-optimization","data-fetching-library","store-architecture","atomic-state-pattern","cache-invalidation","form-state-handling","middleware-composition","devtools-integration"],"summary_rewrite":"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\u2014helping you avoid prop drilling and scale effectively."},"files":[{"bytes":14237,"path":"plugins/react-master/skills/react-state-management/SKILL.md","sha256":"a7b747bb84b4e5a66b6290ae73b2cd86b139450eece85e5a3b12164cbda32294","url":"https://skillfed.io/files/JosiahSiegel/claude-plugin-marketplace/react-state-management/9039bb54/SKILL.md"}],"id":"JosiahSiegel/claude-plugin-marketplace/react-state-management","links":{"html":"https://skillfed.io/JosiahSiegel/claude-plugin-marketplace/react-state-management","md":"https://skillfed.io/JosiahSiegel/claude-plugin-marketplace/react-state-management.md","repo":"https://github.com/JosiahSiegel/claude-plugin-marketplace"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":10,"language":"Shell","last_updated":"2026-06-18","license":"MIT","name":"react-state-management","publisher":"JosiahSiegel","stars":49},"relations":{"similar":[{"id":"duck4nh/antigravity-kit/state-management-expert"},{"id":"emanueleielo/deepagents-open-lovable/state-management"},{"id":"PracticalSwan/agent-skills/react-development"},{"id":"jmsktm/claude-settings/state-management"},{"id":"JosiahSiegel/claude-plugin-marketplace/react-hooks-complete"},{"id":"irahardianto/awesome-agv/react-idioms"},{"id":"softaworks/agent-toolkit/react-dev"},{"id":"patricio0312rev/skills/zustand-state-builder"},{"id":"manutej/luxor-claude-marketplace/frontend-architecture"},{"id":"personamanagmentlayer/pcl/react-expert"}]},"slug":{"owner":"JosiahSiegel","repo":"claude-plugin-marketplace","skill":"react-state-management"},"version":"9039bb54"}