なぜ Zustand を選ぶのか？
⚡
シンプル & ミニマル
プロバイダーなし、コンテキストなし、純粋な React フック。学習しやすく使いやすいシンプルな API。
🚀
高速 & パフォーマンス
自動レンダリング最適化と最小限の再レンダリングによるパフォーマンス最適化。
📈
スケーラブル
小規模アプリに最適で、大規模で複雑なアプリケーションにも簡単にスケールします。
🎯
TypeScript ファースト
TypeScript を念頭に構築され、優れた型推論と開発者エクスペリエンスを提供します。
🔧
DevTools サポート
Redux DevTools と統合して、デバッグと状態検査を簡単に。
🔌
柔軟なミドルウェア
永続化、開発ツールなどのミドルウェアで機能を拡張。
クイックスタート
1
Zustand をインストール
npm install zustand2
ストアを作成
import { create } from 'zustand'
const useStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
decrement: () => set((state) => ({ count: state.count - 1 })),
}))3
コンポーネントでストアを使用
function Counter() {
const { count, increment, decrement } = useStore()
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</div>
)
}