What problem does it solve?
Zustand stores in React apps often become untyped, trigger unnecessary re-renders, and are difficult to compose, persist, and test; this Skill provides patterns and conventions to design maintainable, performant, and well-typed client-side stores.
Core Features & Use Cases
- Clear typing separation: separate State and Actions interfaces to improve DX and composability in TypeScript projects.
- Selective subscriptions: enforce subscribeWithSelector and individual selectors to minimize re-renders and enable outside-React listeners.
- Middleware composition: recommended ordering and use of devtools, persist, subscribeWithSelector, and immer for debugging, hydration, and safe nested updates.
- Slice pattern & cross-slice actions: split large stores into focused slices for auth, cart, preferences, and coordinate actions across slices.
- Hydration & testing: handle asynchronous persist hydration, provide reset actions for test isolation, and patterns for asserting store behavior in unit tests.
- Performance patterns: derived selectors, transient updates without re-render, and using shallow/selectors for composite reads.
Quick Start
Create a typed Zustand store using subscribeWithSelector, split into auth and cart slices, and add persist and immer middleware to enable hydration and safe nested updates.
