Introduction to Zustand and Store Basics

What is Zustand?

Zustand (German for “state”) is a small, fast, and scalable state management library for React. It provides a simple, minimal API to manage both local and global state without the boilerplate of Redux or the complexity of Context.

Zustand is created by the team behind Jotai and React Spring, and it focuses on:

• ✅ Simplicity
• ✅ Performance (no provider needed)
• ✅ Full TypeScript support
• ✅ Middleware and plugin extensibility

---

Why Choose Zustand?

• No context provider necessary
• Centralized state logic (or split into slices)
• Built-in middleware support (devtools, persistence, immer)
• Great for both simple and complex apps
• Works with SSR frameworks like Next.js

> Zustand gives you a Redux-like store experience without the ceremony.

---

Basic Store Example

Here’s how easy it is to create a Zustand store:

import { create } from "zustand";

type BearState = {
  bears: number;
  increase: () => void;
};

const useBearStore = create<bearstate>((set) =&gt; ({
  bears: 0,
  increase: () =&gt; set((state) =&gt; ({ bears: state.bears + 1 })),
}));

You can use it directly in your component:

function BearCounter() {
  const bears = useBearStore((state) => state.bears);
  return <h1>{bears} bears</h1>;
}

---

Setup Requirements

Install Zustand using your package manager:

npm install zustand
# or
yarn add zustand

If you’re using TypeScript, Zustand supports types out-of-the-box. No special typings are needed for basic usage.

---

✅ You now have Zustand running with a simple counter example.

Next: Lesson 02 – Creating Your First Store with TypeScript