Start here

If you are new to Zustand, begin here for installation, a high-level overview, and a hands-on tutorial.

• Introduction — Install Zustand and create your first store.
• Comparison with other tools — See how Zustand compares to Redux, Jotai, Recoil, and others.
• Tutorial: Tic Tac Toe — Build a complete game to learn Zustand concepts step by step.

Core concepts

The fundamentals of reading and updating state in a Zustand store.

• Updating state — How to update primitive values, objects, and nested state.
• Practice with no store actions — Define state updates outside the store for simpler patterns.
• Slices pattern — Split a large store into smaller, composable slices.
• Immutable state and merging — Understand how Zustand merges state and when to spread manually.
• Maps and sets usage — Work with Map and Set inside Zustand state correctly.

Performance and rendering

Techniques for keeping re-renders minimal and components fast.

• Prevent rerenders with useShallow — Use shallow comparison to avoid unnecessary re-renders when selecting objects.
• Connect to state with URL hash — Sync store state with the URL hash for shareable UI state.
• Event handler in pre React 18 — Handle the batching edge case in React 17 and earlier.

TypeScript path

Guides for typing stores, actions, and selectors with TypeScript.

• Beginner TypeScript — Type a basic store with state and actions.
• Advanced TypeScript — Type slices, middleware stacks, and complex patterns.
• Auto-generating selectors — Generate typed selectors automatically from a store definition.

Frameworks and platforms

Using Zustand in server-rendered and framework-specific environments.

• Next.js — Set up Zustand in a Next.js app with proper SSR handling.
• SSR and hydration — Avoid hydration mismatches when rendering on the server.
• Initialize state with props — Seed a store's initial state from React component props.

Testing and quality

Best practices for writing reliable, maintainable code with Zustand.

• Testing stores and components — Test store logic and React components that consume a store.
• Flux-inspired practice — Apply Flux conventions to keep state changes predictable.
• How to reset state — Reset a store back to its initial state on demand.