State management

Context / Zustand / Redux Toolkit

Our pick

Zustand

It's short to write, and you don't need to wrap anything in a Provider. For values that rarely change, Context is enough without adding a library

Compare the result

We built the same thing with each library. Try them out.

Context
Zustand
Redux Toolkit

Compare the code

Edit the code and the preview on the right updates.

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="Product A" />
        <Product name="Product B" />
      </Shell>
    </CartContext.Provider>
  )
}

Comparison

As of October 2026

Features

Built into React. Wrap components in a Provider to share a value, and read it with useContext. When the value changes, everything reading it re-renders

Best for

Sharing values that rarely change, like the logged-in user or the dark mode setting

Zustand

Our pickOfficial site ↗

Features

A popular library right now. Put values and the functions that change them in one place with create, and use them from anywhere. No Provider needed, and the code is short

Best for

The safe default. Sharing values that change often, like what's in the cart

Redux Toolkit

Official site ↗

Features

A shorter way to write Redux, which has been around for a long time. It has many rules, so code stays consistent even with a big team

Best for

Working on company code that already uses Redux. Building a large app with a big team