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)

使用 Zustand 在 React 中构建类型安全的全局状态。支持 TypeScript、持久中间件、开发工具、切片模式和带有水合处理的 Next.js SSR。防止 6 个已记录的错误。 在设置 React 状态、从 Redux/Context 迁移或排除水合错误、TypeScript 推理、无限渲染循环或持久竞争条件时使用。 来源：sovranbitcoin/sovran。

查看原文