{"enrichment":{"faq":[{"a":"Zustand uses a hook-based API to manage global state without providers. Create a store with `create()`, define your state and actions, then use the hook in components. Zustand automatically tracks which parts of state each component uses, re-rendering only when those specific values change. This makes it simpler than Context API while avoiding Redux boilerplate.","q":"How do you use zustand hooks for state management in React?"},{"a":"Zustand state management eliminates the need for providers, reducers, and action creators. Unlike Redux, zustand uses direct mutations and a simpler API; unlike Context API, it avoids prop drilling and provider nesting. Zustand's hook-based approach with fine-grained selectors means components only re-render when their subscribed state actually changes, improving performance.","q":"What makes zustand different from Redux or Context API?"},{"a":"Zustand supports middleware for persistence and debugging. The `persist` middleware automatically saves state to localStorage and rehydrates on app load. The `devtools` middleware integrates with Redux DevTools for time-travel debugging, action history, and state inspection. Both can be chained together in store creation for a complete development experience.","q":"Can zustand persist state and integrate with devtools?"},{"a":"Zustand provides full TypeScript support through generic types. Define your state interface, pass it to `create<YourState>()`, and get automatic type inference for actions and selectors. This ensures compile-time safety for all state mutations and subscriptions. Combined with zustand's hook API, TypeScript integration makes refactoring and catching errors straightforward.","q":"How do you build type-safe stores with zustand and TypeScript?"},{"a":"Zustand uses selectors to subscribe components to specific state slices, preventing unnecessary re-renders. Instead of using the entire store in a component, pass a selector function that extracts only the needed values. Zustand compares selected values using shallow equality by default, so components only update when their selected state actually changes.","q":"What is zustand's selector optimization for React re-renders?"},{"a":"Zustand supports SSR through its `persist` middleware and manual hydration patterns. On the server, create store snapshots; on the client, hydrate the store with server state before rendering. Zustand's flexibility allows you to control when hydration happens, preventing hydration mismatches and ensuring consistent state between server and client in Next.js and similar frameworks.","q":"How does zustand handle server-side rendering and hydration?"}],"shadow_tags":["client-state-library","hook-based-api","minimal-boilerplate","store-pattern","typescript-first","middleware-system","performance-focused","dev-tools-support"],"summary_rewrite":"Zustand provides lightweight state management for React using hooks instead of providers or complex patterns. It's designed for apps needing global state without Redux overhead, offering direct mutations and flexible hydration for server-side rendering."},"files":[{"bytes":24953,"path":"toolchains/typescript/state/zustand/SKILL.md","sha256":"19d1a3ef863d9290d08cbbde3cb528ebb67496a58b2c0b8258cabf8cec40014b","url":"https://skillfed.io/files/bobmatnyc/claude-mpm-skills/zustand/2a9937b9/SKILL.md"}],"id":"bobmatnyc/claude-mpm-skills/zustand","links":{"html":"https://skillfed.io/bobmatnyc/claude-mpm-skills/zustand","md":"https://skillfed.io/bobmatnyc/claude-mpm-skills/zustand.md","repo":"https://github.com/bobmatnyc/claude-mpm-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":18,"language":"Python","last_updated":"2026-07-18","license":"MIT","name":"zustand","publisher":"bobmatnyc","stars":62},"relations":{"similar":[{"id":"patricio0312rev/skills/zustand-state-builder"},{"id":"Gentleman-Programming/Gentleman-Skills/zustand-5"},{"id":"prowler-cloud/prowler/zustand-5"},{"id":"jmsktm/claude-settings/state-management"},{"id":"secondsky/claude-skills/zustand-state-management"},{"id":"manutej/luxor-claude-marketplace/frontend-architecture"},{"id":"personamanagmentlayer/pcl/react-expert"},{"id":"emanueleielo/deepagents-open-lovable/state-management"},{"id":"wshobson/agents/react-state-management"},{"id":"JosiahSiegel/claude-plugin-marketplace/react-state-management"}]},"slug":{"owner":"bobmatnyc","repo":"claude-mpm-skills","skill":"zustand"},"version":"2a9937b9"}