create

Learn to create stores with create.

A store with create

create is Zustand's single entry point. It takes a callback; the callback returns the state object. The state object contains both data fields and action functions. This distinction removes the need for a reducer/action split like in Redux.

The store returns a hook; this is why its name starts with the use prefix (useCart, useAuth). Components call this hook to select the field they want. The set function does a partial update; only the given fields change, the rest are kept.

Partial updates

set merges the object it receives into the current state. Calling set({ count: 5 }) only changes the count field; the rest of the state is kept. This behavior replaces the Object.assign or spread merge we do in Redux.

To update based on the previous state you write set((s) => ({ count: s.count + 1 })). Here s is the state before the update. This pattern is common for counters, list additions and form fields.

Exercise Write the useCart store

Define the useCart store. Use create((set) => ({ items: [], addItem: (item) => set((s) => ({ items: [...s.items, item] })) })). Export it with export const.

Show example solution

import { create } from 'zustand';

export const useCart = create((set) => ({
  items: [],
  addItem: (item) => set((s) => ({ items: [...s.items, item] })),
}));

Test yourself

Match the create parts

create

Creates the store
set

Partial update
get

Reads state
use...

Hook name prefix

The set call

increment: () => set((s) => ({ count: s.count + ____ })),

Show answer

increment: () => set((s) => ({ count: s.count + 1 })),

What kind of update does set do?
- A partial update
- Only reads
- Deletes the entire state
- Sets up a provider
Show answer

Only reads — set does a partial update.

Next lesson: Reading state

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies