{"enrichment":{"faq":[{"a":"zustand-patterns is an MIT-licensed reference for mastering Zustand 5.x state management in React applications. It covers store creation, middleware composition, selector optimization, and persistence strategies with TypeScript examples. The guide emphasizes practical patterns and anti-patterns to help you build scalable, type-safe state solutions as a lighter alternative to Redux.","q":"What is zustand-patterns and how does it help with React state management?"},{"a":"zustand-patterns teaches setting up type-safe stores by defining clear store interfaces, using TypeScript inference for automatic type safety, and composing middleware in the correct order. Key practices include wrapping your store creator with middleware like Immer for immutable updates, persist for localStorage integration, and devtools for debugging. Selectors should be memoized to prevent unnecessary re-renders when accessing store values.","q":"How do you set up a type-safe Zustand store with proper middleware and selectors?"},{"a":"zustand-patterns covers the slices pattern for organizing large stores by splitting state into logical modules. Each slice manages its own state and actions, then combines into a single store. This modular approach improves maintainability and prevents monolithic state objects. The guide shows how to compose slices cleanly while maintaining type safety and avoiding common pitfalls like deeply nested state updates.","q":"What are zustand slices pattern and modular store organization best practices?"},{"a":"zustand-patterns explains middleware composition order: typically Immer wraps your store for immutable-style updates, persist handles localStorage synchronization, and devtools enables time-travel debugging. Correct ordering ensures each middleware receives the expected interface. The guide demonstrates configuring persist with custom storage, handling hydration, and using devtools to inspect state changes\u2014essential for production applications.","q":"How do you implement persistence, devtools, and Immer middleware correctly in Zustand?"},{"a":"zustand-patterns emphasizes selector optimization to avoid unnecessary re-renders. Use shallow equality checks with useShallow for multiple values, or create memoized selectors that extract only needed state slices. Avoid destructuring directly from the store hook; instead pass selector functions. This ensures components only re-render when their specific selected values change, not on every store update.","q":"How can zustand selectors prevent re-renders and optimize performance?"},{"a":"zustand-patterns identifies anti-patterns like destructuring store values outside selectors, storing server state in client stores, improper middleware ordering, and deeply nested state mutations. Best practices include keeping stores focused on client state, using selectors consistently, composing middleware correctly, and leveraging TypeScript for type inference. The guide provides clear examples of what to avoid and recommended alternatives for maintainable state management.","q":"What are common Zustand anti-patterns and best practices to avoid?"}],"shadow_tags":["lightweight-state-lib","no-boilerplate-setup","immutable-updates","selector-memoization","middleware-composition","client-state-focus","typescript-first","devtools-debugging"],"summary_rewrite":"Master Zustand 5.x state management with practical patterns for React applications. This reference covers store creation, middleware composition, selector optimization, and persistence strategies\u2014all with TypeScript examples and clear anti-patterns to avoid."},"files":[{"bytes":4952,"path":"src/skills/zustand-patterns/SKILL.md","sha256":"a9d6c3fa8145989145a9b73920d864bd8f9b9c602554a72cbd0f4e00a84e68d3","url":"https://skillfed.io/files/yonatangross/orchestkit/zustand-patterns/78384884/SKILL.md"}],"id":"yonatangross/orchestkit/zustand-patterns","links":{"html":"https://skillfed.io/yonatangross/orchestkit/zustand-patterns","md":"https://skillfed.io/yonatangross/orchestkit/zustand-patterns.md","repo":"https://github.com/yonatangross/orchestkit"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":20,"language":"TypeScript","last_updated":"2026-07-28","license":"MIT","name":"zustand-patterns","publisher":"yonatangross","stars":208},"relations":{"similar":[{"id":"oakoss/agent-skills/zustand"},{"id":"prowler-cloud/prowler/zustand-5"},{"id":"patricio0312rev/skills/zustand-state-builder"},{"id":"Gentleman-Programming/Gentleman-Skills/zustand-5"},{"id":"existential-birds/beagle/zustand-state"},{"id":"secondsky/claude-skills/zustand-state-management"},{"id":"bobmatnyc/claude-mpm-skills/zustand"},{"id":"pedronauck/skills/zustand"},{"id":"jmsktm/claude-settings/state-management"},{"id":"AsyrafHussin/agent-skills/state-management"}]},"slug":{"owner":"yonatangross","repo":"orchestkit","skill":"zustand-patterns"},"version":"78384884"}