Zustand Cheat Sheet

A quick reference for Zustand's minimal store API, selectors, and middleware like persist and devtools for React state.

1 PageBeginnerMar 5, 2026

Creating a Store

A store is just a hook created from a state initializer function.

javascript

import { create } from 'zustand';const useCounterStore = create((set, get) => ({  count: 0,  increment: () => set((state) => ({ count: state.count + 1 })),  reset: () => set({ count: 0 }),  getDoubled: () => get().count * 2,}));

Using the Store & Selectors

Selecting only the state a component needs, including multi-field selection.

javascript

function Counter() {  const count = useCounterStore((state) => state.count);  const increment = useCounterStore((state) => state.increment);  return <button onClick={increment}>Count: {count}</button>;}// select multiple fields with a shallow comparisonimport { useShallow } from 'zustand/react/shallow';const { count, increment } = useCounterStore(  useShallow((state) => ({ count: state.count, increment: state.increment })));

Middleware: persist & devtools

Persisting store state to localStorage and connecting to Redux DevTools.

javascript

import { create } from 'zustand';import { persist, devtools } from 'zustand/middleware';const useStore = create(  devtools(    persist(      (set) => ({        theme: 'light',        toggleTheme: () =>          set((s) => ({ theme: s.theme === 'light' ? 'dark' : 'light' })),      }),      { name: 'theme-storage' } // localStorage key    )  ));

Core API

The handful of functions that make up Zustand's surface area.

create- creates a store hook from a state initializer function
set- updates state with a shallow merge by default; pass a function to base it on the previous state
get- reads current state from inside actions without creating a subscription
persist- middleware that saves store state to localStorage (or another storage) automatically
devtools- middleware that connects the store to the Redux DevTools extension
subscribe- subscribes to store changes outside of React components
useShallow- selector helper for picking multiple fields while avoiding unnecessary re-renders

Pro Tip

Selecting the whole state, e.g. useStore(), re-renders the component on every store change -- always select only the specific field(s) a component needs, e.g. useStore(state => state.count), to keep re-renders minimal.

Was this cheat sheet helpful?

Redux Cheat Sheet

React Query (TanStack Query) Cheat Sheet