{"enrichment":{"faq":[{"a":"Zustand State Management lets you create global stores with minimal boilerplate. Define a store using `create()`, then consume it in components via custom hooks. Zustand automatically handles subscriptions and re-renders only when selected state changes, making it simpler than Context API or Redux for most React applications.","q":"How do you use Zustand with React hooks?"},{"a":"Zustand State Management offers a lighter alternative to both Redux and Context API. Unlike Redux, it requires no reducers or action creators; unlike Context API, it avoids provider nesting and prop drilling. Zustand's selector-based subscriptions prevent unnecessary re-renders, making migration from Redux or Context API straightforward and performance-friendly.","q":"What's the difference between Zustand, Redux, and Context API?"},{"a":"Zustand State Management includes a persist middleware that automatically syncs your store to localStorage. Wrap your store with `persist()`, specify a storage key, and optionally configure which state slices to save. On app reload, Zustand hydrates from localStorage, though you must handle hydration mismatches in Next.js SSR carefully to avoid text content errors.","q":"How do you persist Zustand state to localStorage?"},{"a":"Zustand State Management supports full TypeScript inference when you structure stores correctly. Define your state interface, use `create<YourState>()` with proper typing, and leverage selector functions for type-safe subscriptions. The v5 TypeScript inference improvements make setup more ergonomic, reducing manual type annotations while maintaining compile-time safety.","q":"How do you set up Zustand with TypeScript for type safety?"},{"a":"Zustand State Management can cause hydration mismatches when server and client render different content. This happens if you access store state before hydration completes. Use the `useShallow()` hook or guard state access with `typeof window` checks. The persist middleware's `onRehydrateStorage` callback lets you sync server state safely before rendering.","q":"What causes hydration errors in Zustand with Next.js SSR?"},{"a":"Zustand State Management prevents infinite loops by using shallow equality checks and selector functions. Ensure selectors return stable references\u2014wrap object returns in `useShallow()` or memoize them. Avoid creating new store instances on every render, and use the immer middleware carefully to prevent accidental state mutations that trigger unnecessary updates.","q":"How do you fix infinite render loops in Zustand stores?"}],"shadow_tags":["client-side-state","react-hooks-library","minimal-api","typescript-first","fine-grained-subscriptions","ssr-compatible","middleware-ecosystem","redux-alternative","hydration-aware"],"summary_rewrite":"Zustand State Management teaches you to build type-safe global state for React without boilerplate. Master the three core patterns\u2014basic stores, TypeScript-first setup, and persistent storage\u2014while avoiding common pitfalls like hydration mismatches and infinite render loops."},"files":[{"bytes":9969,"path":"plugins/zustand-state-management/skills/zustand-state-management/SKILL.md","sha256":"8fa49c2cb1968ab14628b1b79a0bb19922aa93d4fe5578f8f07d6dbfdc3348e0","url":"https://skillfed.io/files/secondsky/claude-skills/zustand-state-management/2f1bb32a/SKILL.md"}],"id":"secondsky/claude-skills/zustand-state-management","links":{"html":"https://skillfed.io/secondsky/claude-skills/zustand-state-management","md":"https://skillfed.io/secondsky/claude-skills/zustand-state-management.md","repo":"https://github.com/secondsky/claude-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":29,"language":"TypeScript","last_updated":"2026-07-25","license":"MIT","name":"zustand-state-management","publisher":"secondsky","stars":196},"relations":{"similar":[{"id":"bobmatnyc/claude-mpm-skills/zustand"},{"id":"existential-birds/beagle/zustand-state"},{"id":"oakoss/agent-skills/zustand"},{"id":"patricio0312rev/skills/zustand-state-builder"},{"id":"yonatangross/orchestkit/zustand-patterns"},{"id":"Gentleman-Programming/Gentleman-Skills/zustand-5"},{"id":"prowler-cloud/prowler/zustand-5"},{"id":"Mindrally/skills/zustand-state-management"},{"id":"emanueleielo/deepagents-open-lovable/state-management"},{"id":"pproenca/dot-skills/zustand"}]},"slug":{"owner":"secondsky","repo":"claude-skills","skill":"zustand-state-management"},"version":"2f1bb32a"}