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、永続ミドルウェア、devtools、スライス パターン、およびハイドレーション処理を備えた Next.js SSR をサポートします。 6 つの文書化されたエラーを防止します。 React 状態のセットアップ、Redux/Context からの移行、またはハイドレーション エラー、TypeScript 推論、無限レンダリング ループ、または永続的な競合状態のトラブルシューティングを行う場合に使用します。 ソース: sovranbitcoin/sovran。

原文を見る