React向けの非常にシンプルで軽量な状態管理ライブラリです。
Reduxのように複雑な設定が必要なく、「ただのJavaScriptオブジェクトを作る感覚」で扱えます
状態管理ライブラリの分類
クライアント状態 ← → サーバー状態（API）
クライアント × グローバル
Zustand
Jotai
Redux
Context API
例: テーマ、モーダル状態、カート
サーバー × グローバル
React Query
SWR
Apollo Client
例: ユーザー情報、商品一覧、投稿データ
クライアント × ローカル
useState
useReducer
例: フォーム入力、開閉状態、カウンター
サーバー × ローカル
fetch + useState
useEffect内でAPI
例: 単発のAPI呼び出し（キャッシュ不要）
↑ グローバル
ローカル ↓
選び方の指針
- • APIから取得するデータ → React Query / SWR
- • 複数コンポーネントで共有するUI状態 → Zustand / Jotai
- • 単一コンポーネント内の状態 → useState
目次
createで作成したものが「ストア」
ストア、グローバルステートとは
そもそもストアとはグローバルステートを保存するためのオブジェクトや仕組みになります
グローバルステートとは、useStateで管理するような特定のコンポーネント内でのみではなく、アプリのどこからでもアクセスできるデータ
createは、storeを作成して、そのstoreにアクセスするためのフックを返します。
storeの初期状態と更新関数を定義したオブジェクトを記述します
簡単なサンプル
import { create } from 'zustand';
const useStore = create((set) => ({
// 状態（State）
count: 0,
// 更新関数（Action）
inc: () => set((state) => ({ count: state.count + 1 })),
}));
