{"enrichment":{"faq":[{"a":"Zustand State lets you create a store by calling `create()` with a function that receives `set` and `get`. Define your state and actions directly: `const useStore = create((set) => ({ count: 0, increment: () => set(state => ({ count: state.count + 1 })) }))`. No providers needed\u2014import and use the hook anywhere in your React app. Zustand State handles subscriptions automatically.","q":"How do I create a zustand store?"},{"a":"Zustand State selectors let you pick specific state slices to prevent unnecessary rerenders. Use `useStore((state) => state.count)` to subscribe only to `count` changes. The `useShallow` hook compares shallow equality on objects or arrays, reducing rerenders when nested state changes but the shallow structure stays the same. This optimization keeps your components efficient.","q":"What is zustand selector performance and how does useShallow help?"},{"a":"Zustand State includes a persist middleware that automatically syncs state to localStorage. Wrap your store with `persist()`: `create(persist((set) => ({ ... }), { name: 'my-store' }))`. On app load, the stored state hydrates automatically. You can customize storage, merge strategies, and which fields persist.","q":"How can I persist zustand state to localStorage?"},{"a":"Yes. Zustand State stores expose `getState()` and `setState()` methods. Call `useStore.getState()` to read state or `useStore.setState({ count: 5 })` to update it from anywhere\u2014event handlers, API calls, or vanilla JavaScript. You can also subscribe to changes with `useStore.subscribe()` without React hooks.","q":"Can I access and update zustand state outside React components?"},{"a":"Zustand State works with Redux DevTools via the devtools middleware. Wrap your store: `create(devtools((set) => ({ ... }), { name: 'MyStore' }))`. You'll see all state changes, time-travel debugging, and action history in the Redux DevTools browser extension. Combine it with persist for full state management visibility.","q":"How do I integrate zustand devtools for debugging?"},{"a":"Yes. Zustand State works in vanilla JavaScript by creating stores without React hooks. Use `create()` to define state and actions, then call `getState()`, `setState()`, and `subscribe()` directly. No React dependency required\u2014ideal for vanilla apps, Node.js scripts, or non-React frameworks needing lightweight global state.","q":"Is zustand state management suitable for vanilla JavaScript without React?"}],"shadow_tags":["state-container","hook-based-api","provider-less","selector-optimization","middleware-extensible","vanilla-js-support","dev-tooling","persistence-layer"],"summary_rewrite":"Zustand State is a minimal state management solution designed for React and vanilla JavaScript applications. It eliminates boilerplate by removing the need for providers and offers fine-grained control through selectors to optimize component rerenders. The skill covers store creation, state updates, performance patterns, and integration with middleware like persistence and devtools."},"files":[{"bytes":3559,"path":"plugins/beagle-react/skills/zustand-state/SKILL.md","sha256":"bb1ea5fdc406116e6482048d3876daff8252b6e271e0f6f742679b9508b2d690","url":"https://skillfed.io/files/existential-birds/beagle/zustand-state/ef794953/SKILL.md"}],"id":"existential-birds/beagle/zustand-state","links":{"html":"https://skillfed.io/existential-birds/beagle/zustand-state","md":"https://skillfed.io/existential-birds/beagle/zustand-state.md","repo":"https://github.com/existential-birds/beagle"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":10,"language":"TypeScript","last_updated":"2026-07-21","license":"Apache-2.0","name":"zustand-state","publisher":"existential-birds","stars":74},"relations":{"similar":[{"id":"oakoss/agent-skills/zustand"},{"id":"bobmatnyc/claude-mpm-skills/zustand"},{"id":"secondsky/claude-skills/zustand-state-management"},{"id":"Mindrally/skills/zustand-state-management"},{"id":"vercel-labs/json-render/zustand"},{"id":"yonatangross/orchestkit/zustand-patterns"},{"id":"Gentleman-Programming/Gentleman-Skills/zustand-5"},{"id":"prowler-cloud/prowler/zustand-5"},{"id":"AsyrafHussin/agent-skills/state-management"},{"id":"existential-birds/beagle/review-frontend"}]},"slug":{"owner":"existential-birds","repo":"beagle","skill":"zustand-state"},"version":"ef794953"}