zustand-state-management

SKILL.md

Last Updated: 2026-01-21 Latest Version: zustand@5.0.10 (released 2026-01-12) Dependencies: React 18-19, TypeScript 5+

✅ Use create ()() (double parentheses) in TypeScript for middleware compatibility ✅ Define separate interfaces for state and actions ✅ Use selector functions to extract specific state slices ✅ Use set with updater functions for derived state: set((state) => ({ count: state.count + 1 })) ✅ Use unique names for persist middleware storage keys

✅ Handle Next.js hydration with hasHydrated flag pattern ✅ Use useShallow hook for selecting multiple values ✅ Keep actions pure (no side effects except state updates)

Cree un estado global con seguridad de tipos en React con Zustand. Admite TypeScript, middleware persistente, herramientas de desarrollo, patrón de cortes y Next.js SSR con manejo de hidratación. Previene 6 errores documentados. Úselo al configurar el estado de React, migrar desde Redux/Context o solucionar errores de hidratación, inferencia de TypeScript, bucles de renderizado infinitos o condiciones de carrera persistentes. Fuente: jezweb/claude-skills.

Ver original