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)

Créez un état global de type sécurisé dans React avec Zustand. Prend en charge TypeScript, le middleware persistant, les outils de développement, le modèle de tranches et Next.js SSR avec gestion de l'hydratation. Empêche 6 erreurs documentées. À utiliser lors de la configuration de l'état React, de la migration depuis Redux/Context ou du dépannage d'erreurs d'hydratation, d'inférence TypeScript, de boucles de rendu infinies ou de conditions de concurrence persistantes. Source : sovranbitcoin/sovran.

Voir l'original