状態管理

Context ／ Zustand ／ Redux Toolkit

迷ったらこれ

Zustand

短く書けて、Provider で囲む手間もない。あまり変わらない値なら、ライブラリを入れずに Context で十分

見た目をくらべる

同じものを、それぞれのライブラリで作りました。触ってみてください

Context

Zustand

Redux Toolkit

書き方をくらべる

コードを書き換えると、右の見た目が変わります

import { createContext, useContext, useState } from "react"
import { CartHeader, ProductRow, Shell } from "./ui"

const CartContext = createContext({ count: 0, add: () => {} })

function Header() {
  const { count } = useContext(CartContext)
  return <CartHeader count={count} />
}

function Product({ name }: { name: string }) {
  const { add } = useContext(CartContext)
  return <ProductRow name={name} onAdd={add} />
}

export default function App() {
  const [count, setCount] = useState(0)
  const add = () => setCount(count + 1)

  return (
    <CartContext.Provider value={{ count, add }}>
      <Shell>
        <Header />
        <Product name="商品A" />
        <Product name="商品B" />
      </Shell>
    </CartContext.Provider>
  )
}

Open Sandbox

くらべる

2026年10月時点

Context

公式 ↗

特徴

React に最初から入っている。値を Provider で囲んだ中に配り、useContext で受け取る。値が変わると、受け取っている所が全部描き直される

向いている場面

ログイン中のユーザーや、ダークモードの設定など、あまり変わらない値を共有する

Zustand

迷ったらこれ公式 ↗

特徴

いま人気のライブラリ。値と変え方を create で1か所にまとめ、どこからでも使える。Provider がいらず、短く書ける

向いている場面

迷ったらこれ。カートの中身など、よく変わる値を共有する

Redux Toolkit

公式 ↗

特徴

長く使われてきた Redux を、短く書けるようにしたもの。決まりが多いぶん、大人数で作っても書き方がそろう

向いている場面

すでに Redux を使っている会社のコードを触る。大きなアプリを大人数で作る