👋

Zustandで始める「一番シンプルな」React状態管理

に公開
React
状態管理
tech

1. はじめに

  • Reactの状態管理は、もはやReduxほどの大げさな仕組みを必要としません。
  • Zustandなら、数行のコードで「グローバルな状態」を作成し、コンポーネントからフックとして呼び出すだけ。
  • 今回は、最も基本的なカウンターアプリを例に、その「薄さ」と「便利さ」を解説します。

2. インストール

まずはパッケージの追加から。

npm install zustand

3. ストアの作成（基本コード）

ここがZustandの肝です。create関数を使って、状態（state）とそれを更新する関数（action）を一つのオブジェクトにまとめます。

import { create } from 'zustand'

const useStore = create((set) => ({
  count: 0,
  // 状態を更新するアクション
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}))

export default useStore;

4. コンポーネントでの使用

Providerでラップする必要もありません。使いたい場所でインポートして呼び出すだけです。

import useStore from './store'

function Counter() {
  // 必要な状態や関数だけをセレクトして取り出す
  const count = useStore((state) => state.count)
  const increment = useStore((state) => state.increment)

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>プラス</button>
    </div>
  )
}

5. なぜZustandがいいのか？（まとめ）

  • ボイラープレートがほぼゼロ: ReduxのようにAction TypeやReducerを分ける必要がない。
  • フックベース: useStoreと書くだけでReactのフックとして動作し、直感的に扱える。
  • レンダリングの最適化: 必要な状態だけをセレクトして取得するため、不要な再レンダリングを抑えやすい。

Discussion