What is Zustand?

Learn that Zustand is a simple state library.

What is Zustand?

Zustand is a small, fast state library. It does not need Redux's provider, action and reducer boilerplate; you write a store with a single create call.

A Zustand store is exported as a hook; components call this hook to read state. This cuts boilerplate significantly.

Zustand requires no provider; the store lives at module scope and is shared by every component.

Store with create

The create function takes a setup function; this function uses set and get parameters to define the state. The exported hook reads and changes this state.

Example: export const useCounter = create((set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }));

In components you read only the count with const count = useCounter((s) => s.count); this prevents unnecessary renders.

Exercise Write useCounter store

Complete the skeleton. Define useCounter store with create. State: { count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }. Export with export const useCounter = create(...).

Show example solution

import { create } from 'zustand';

export const useCounter = create((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
}));

Test yourself

What does Zustand NOT require?
```
The store lives at module scope.
```
- Provider
- JavaScript
- React
- HTML
Show answer

Provider — Zustand does not require a provider.

create import

import ____ from 'zustand';

Show answer

import create from 'zustand';

What is Zustand: match the terms

create

Builds store
set

Updates state
get

Reads state
useStore

Returns hook

Next lesson: Store with create

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies