Why does this skill recommend the double parentheses syntax for store creation?

The create ()() syntax is required in TypeScript to ensure proper type inference and compatibility when using middlewares like persist or devtools.

How do I prevent infinite render loops when selecting multiple state values?

The skill instructs you to use the useShallow hook or separate primitive selectors to ensure object references don't trigger unnecessary re-renders.

How does this skill solve Next.js hydration errors?

It implements a documented _hasHydrated flag pattern within the store that allows components to wait for client-side rehydration before rendering state-dependent UI.

Is this skill updated for Zustand v5?

Yes, it includes specific guidance for v5.0.10+, addressing breaking changes in middleware imports and internal fixes for rehydration race conditions.

Does it support complex state architectures?

Yes, it includes detailed patterns for the Slices pattern, allowing you to split large stores into smaller, manageable files while maintaining full type safety.

Zustand State Management

Name: Zustand State Management
Author: evolv3ai

byevolv3ai

0•

Herramientas para Desarrolladores

Builds type-safe, production-ready global state stores in React using Zustand v5 with optimized patterns for Next.js and TypeScript.

This skill provides a comprehensive framework for implementing Zustand state management in modern React applications. It enforces industry-standard patterns such as the slices pattern for modularity, handles complex TypeScript inference using the curried create function, and provides battle-tested solutions for common pitfalls like Next.js hydration mismatches and infinite render loops. Whether you are migrating from Redux or configuring a new store with persistence and devtools, this skill ensures your state architecture is performant, type-safe, and resilient against documented race conditions found in recent library versions.

Características Principales

01Performance optimization through useShallow and stable selector patterns

02TypeScript-first store creation using optimized curried syntax for middleware compatibility

03Modular state architecture implementation via the Slices pattern

04Persistent state configuration with localStorage, partialization, and race condition fixes

05Next.js SSR hydration handling with automatic rehydration flag patterns

060 GitHub stars

Casos de Uso

01Implementing persistent user preferences and application state that survive page reloads in SSR environments

02Migrating complex Redux or Context API logic to a lightweight and performant Zustand store

03Troubleshooting and fixing infinite re-render cycles or TypeScript inference errors in existing stores

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add evolv3ai/claude-skills-archive zustand-state-management

For use in Claude.ai and ChatGPT

Download Skill