Skip to content
Home / Migrations / Zustand → Jotai

Zustand → Jotai

medium

Switch when you find yourself splitting one big Zustand store into many slices and want fine-grained atom-based reactivity instead.

Estimated: 3-6h · 5 steps
Progress0%
Step 1: Install Jotai
npm install jotai
Step 2: Wrap app with Provider
import { Provider } from 'jotai'
<Provider>{children}</Provider>
Step 3: Convert state slices to atoms

Each piece of Zustand state becomes an atom. Derived state becomes derived atoms.

const countAtom = atom(0)
const doubledAtom = atom((get) => get(countAtom) * 2)
Step 4: Replace useStore selectors

useStore(s => s.count) → useAtomValue(countAtom). Mutations: useSetAtom(countAtom).

Step 5: Migrate persist middleware

zustand/middleware persist → jotai/utils atomWithStorage.

✓ All UI state behaves identically. No unnecessary re-renders.