Optimize Zustand store selectors, middleware, and slice architecture.
npx skills add https://github.com/recca0120/code-quest --skill zustand-state-recca0120
Please help me install this Agent Skill. Skill: zustand-state Source: https://github.com/recca0120/code-quest/tree/main/.claude/skills/zustand-state Command: npx skills add https://github.com/recca0120/code-quest --skill zustand-state-recca0120
Zustand stores can become slow and hard to maintain when selectors are broad, middleware order is wrong, or realtime events are wired inside React components.
Use zustand-state when you are implementing or refactoring a Zustand store and need reliable selectors, slice composition, and safe socket-to-store updates for a real-time UI.
High-intent search queries and answers about installing and using this skill.
To prevent excessive re-renders with Zustand selectors, select only the minimal state shape needed and apply useShallow for shallow comparisons. Using atomic selectors prevents identity churn and ensures components only re-render when their specific state slice updates.
Correct Zustand middleware stacking order is crucial for predictable store initialization. Apply middleware in the proper sequence so that async logic remains encapsulated inside store actions, ensuring middleware composition executes reliably before state updates occur.
To sync Socket.IO or WebSocket events to a Zustand store outside React, attach event listeners directly to the store using getState and setState. This keeps realtime updates decoupled from component lifecycles and prevents fragile store wiring.
Yes, you can use Zustand createStore for non-React modules requiring optimized state subscriptions. The create hook is for React components, while createStore allows vanilla JavaScript modules to access state directly via getState and setState calls.
Testing Zustand stores via direct getState and setState calls bypasses React rendering complexities. This approach allows you to assert state transitions and middleware behavior in isolation by manipulating and verifying the store synchronously.
Compose Zustand slices for large state architecture when managing scalable applications. Slice-based architecture allows you to split complex state into manageable segments, keeping shared root store initialization predictable and preventing monolithic store wiring.
aexol-studioCreate SSR-safe Zustand authentication stores with actions and selectors.
giruclawbotCreate Zustand 5 stores with persistence, selectors, and async actions.
MybonoSet up WebSocket, Socket.io, and SSE servers with client code.
partme-aiConfigure Redux stores, actions, reducers, middleware, and selectors.
