Learn

A guided path to understand Zustand fundamentals, common patterns, and when to reach for specific tools.

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.