Zustandとは？provider不要のReact状態管理ライブラリ

ページ内ナビ

概要

Zustandは、React向けの小さな状態管理ライブラリです。createでstore hookを作り、コンポーネントからselectorで必要な状態だけを購読します。providerを必須にせず、middlewareで永続化やdevtools連携などを追加できます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-09-30

主な特徴

storeをhookとして作り、providerなしで利用する

createへstateとactionを渡すとstore hookが生成され、コンポーネントから直接利用できます。基本利用ではContext Providerを画面全体へ配置する必要がありません。

出典：[2]

selectorとmiddlewareで購読範囲や機能を調整する

selectorで必要なstate sliceだけを購読でき、useShallowで複数値の再描画を抑える方法もあります。persist、devtools、subscribeWithSelectorなどのmiddlewareも用意されています。

出典：[2]

向いている用途

Reactアプリで共有状態を簡潔に管理したい場合に向く

フォームをまたぐ共有状態、画面間のUI状態、クライアント側のアプリ状態などを、Reduxより少ない定型コードで管理したいケースに向きます。React依存なしのvanilla storeも利用できます。

出典：[2]

導入前の確認

stateの置換ではactionまで消さないよう注意する

setの第2引数をtrueにするとmergeではなくstate全体を置換するため、store内のactionも消去できます。全置換を使う場合は保持する値を明示してください。

出典：[2]

React Server Componentsでmodule-level storeを共有しない

READMEはReact Server Componentsでhook storeの状態を共有する使い方について、予期しない不具合や利用者間のprivacy問題につながる可能性を警告しています。RSCではrequest境界を考慮したstore設計が必要です。

出典：[2]

参考にした公式資料

[1]pmndrs/zustand repository(2026-09-30)
[2]Zustand README(2026-09-30)
[3]Zustand package metadata(2026-09-30)
[4]Zustand MIT license(2026-09-30)

編集部からの補足

providerなしで小さく始められますが、selector設計とstore境界は再描画やSSR/RSCの安全性に直結します。特にServer Componentsではrequest間で状態を共有しない設計を先に決める必要があります。

3ステップで試す

1
Zustandを追加
公式READMEの手順で既存のReact projectへZustandを追加します。
npm install zustand
2
store hookを作成
import { create } from 'zustand'; の後で、stateとactionを持つ最小storeを作ります。
const useBearStore = create((set) => ({ bears: 0, increase: () => set((state) => ({ bears: state.bears + 1 })) }))
3
componentから必要なstateだけ購読
selectorで必要な値だけを購読し、actionも同じstore hookから取得して画面操作につなげます。
const bears = useBearStore((state) => state.bears)

公式READMEで確認

成長

成長の推移 · 直近30日

58,774 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）: 1
Open PR: 5

開発アクティビティを蓄積中です。

Built with

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

GitHub Topics

hooks
react
react-context
reactjs
redux
state-management
hacktoberfest

Stars: 58,774
Forks: 2,192
Watchers: 202
Open Issues: 2
Contributors: 337
所有者種別: Organization
主要言語: TypeScript
ライセンス: MIT
リポジトリ最終更新: 2026/09/29

概要

特徴と向いている用途

主な特徴

storeをhookとして作り、providerなしで利用する

selectorとmiddlewareで購読範囲や機能を調整する

向いている用途

Reactアプリで共有状態を簡潔に管理したい場合に向く

導入前の確認

stateの置換ではactionまで消さないよう注意する

React Server Componentsでmodule-level storeを共有しない

参考にした公式資料

3ステップで試す

Zustandを追加

store hookを作成

componentから必要なstateだけ購読

成長

開発アクティビティ

Built with

カテゴリとタグ

カテゴリ

タグ

GitHubデータ

GitHub Topics

関連情報

あわせて探訪