Zustand

For multiple selectors, use useShallow to prevent unnecessary re-renders:

import { useShallow } from 'zustand/react/shallow';

const { user, token } = useAuthStore(useShallow((state) => ({
  user: state.user,
  token: state.token,
})));

Middleware

Persist (localStorage/AsyncStorage)

import { persist, createJSONStorage } from 'zustand/middleware';

export const useSettingsStore = create<SettingsStore>()(
  persist(
    (set) => ({
      theme: 'system' as 'light' | 'dark' | 'system',
      locale: 'en',
      setTheme: (theme) => set({ theme }),
      setLocale: (locale) => set({ locale }),
    }),
    {
      name: 'settings-storage',
      storage: createJSONStorage(() => localStorage),
      partialize: (state) => ({ theme: state.theme, locale: state.locale }), // persist only these fields
    },
  ),
);

Devtools

import { devtools } from 'zustand/middleware';

export const useCartStore = create<CartStore>()(
  devtools(
    (set) => ({ /* store definition */ }),
    { name: 'CartStore' }, // label in Redux DevTools
  ),
);

Combine middleware

// persist + devtools
export const useStore = create<Store>()(
  devtools(
    persist(
      (set) => ({ /* ... */ }),
      { name: 'store' },
    ),
    { name: 'Store' },
  ),
);

Async Actions

interface OrderStore {
  orders: Order[];
  loading: boolean;
  error: string | null;
  fetchOrders: () => Promise<void>;
}

export const useOrderStore = create<OrderStore>((set) => ({
  orders: [],
  loading: false,
  error: null,
  fetchOrders: async () => {
    set({ loading: true, error: null });
    try {
      const orders = await api.getOrders();
      set({ orders, loading: false });
    } catch (e) {
      set({ error: e instanceof Error ? e.message : 'Unknown error', loading: false });
    }
  },
}));

Common Pitfalls

• Selecting entire store — useStore() without selector re-renders on every change. Always use selectors.
• Mutating state directly — Zustand uses immutable updates. set({ items: [...state.items, newItem] }) not state.items.push(newItem).
• Missing useShallow — selecting object/array without shallow comparison causes unnecessary re-renders.
• Persist with sensitive data — localStorage is not encrypted. Never persist tokens. Use partialize to exclude sensitive fields.
• Store as God object — one massive store for everything. Split into domain stores: useAuthStore, useCartStore, useUIStore.
• Forgetting TypeScript generics — create<StoreType>() with extra () is needed when using middleware.

Context7

• Zustand: search for zustand — stores, middleware, selectors, persist, devtools