Zustand Patterns

Zustand State Management Patterns

Basic Store

Simple Store

// stores/counter.ts
import { create } from 'zustand';

interface CounterState {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}

export const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

Usage

'use client';

import { useCounterStore } from '@/stores/counter';

export function Counter() {
  const count = useCounterStore((state) => state.count);
  const increment = useCounterStore((state) => state.increment);

  return (
    <div>
      <p>Count: {count}</p>
      <button
    </div>
  );
}

Store Patterns

Slice Pattern

Split large stores into focused slices:

// stores/app-store.ts
import { create } from 'zustand';

// Auth slice
interface AuthSlice {
  user: User | null;
  isAuthenticated: boolean;
  login: (user: User) => void;
  logout: () => void;
}

const createAuthSlice = (set): AuthSlice => ({
  user: null,
  isAuthenticated: false,
  login: (user) => set({ user, isAuthenticated: true }),
  logout: () => set({ user: null, isAuthenticated: false }),
});

// UI slice
interface UISlice {
  sidebarOpen: boolean;
  toggleSidebar: () => void;
}

const createUISlice = (set): UISlice => ({
  sidebarOpen: true,
  toggleSidebar: () =>
    set((state) => ({ sidebarOpen: !state.sidebarOpen })),
});

// Combined store
type AppState = AuthSlice & UISlice;

export const useAppStore = create<AppState>()((...a) => ({
  ...createAuthSlice(...a),
  ...createUISlice(...a),
}));

Computed Values

Derive values from state:

interface CartState {
  items: CartItem[];
  addItem: (item: CartItem) => void;
  removeItem: (id: string) => void;
  // Computed value as function
  total: () => number;
  itemCount: () => number;
}

export const useCartStore = create<CartState>((set, get) => ({
  items: [],
  addItem: (item) =>
    set((state) => ({ items: [...state.items, item] })),
  removeItem: (id) =>
    set((state) => ({
      items: state.items.filter((item) => item.id !== id),
    })),
  total: () => {
    return get().items.reduce((sum, item) => sum + item.price, 0);
  },
  itemCount: () => get().items.length,
}));

// Usage
function CartSummary() {
  const total = useCartStore((state) => state.total());
  const itemCount = useCartStore((state) => state.itemCount());

  return <div>Total: ${total} ({itemCount} items)</div>;
}

Selectors

Optimized Selectors

Prevent unnecessary re-renders:

import { useCartStore } from '@/stores/cart';
import { shallow } from 'zustand/shallow';

// Bad: Entire store subscribed
function BadComponent() {
  const store = useCartStore();
  return <div>{store.items.length}</div>;
}

// Good: Only subscribe to needed value
function GoodComponent() {
  const itemCount = useCartStore((state) => state.items.length);
  return <div>{itemCount}</div>;
}

// Better: Multiple values with shallow comparison
function BetterComponent() {
  const { items, addItem } = useCartStore(
    (state) => ({ items: state.items, addItem: state.addItem }),
    shallow
  );

  return <div>{items.length}</div>;
}

Custom Selectors

// stores/selectors.ts
import { useUserStore } from './user';

export const useIsAdmin = () =>
  useUserStore((state) => state.user?.role === 'admin');

export const useUserName = () =>
  useUserStore((state) => state.user?.name ?? 'Guest');

export const useHasPermission = (permission: string) =>
  useUserStore((state) =>
    state.user?.permissions.includes(permission)
  );

// Usage
function AdminPanel() {
  const isAdmin = useIsAdmin();
  if (!isAdmin) return null;
  return <div>Admin Panel</div>;
}

Async Actions

Fetch Data

interface PostsState {
  posts: Post[];
  isLoading: boolean;
  error: string | null;
  fetchPosts: () => Promise<void>;
}

export const usePostsStore = create<PostsState>((set) => ({
  posts: [],
  isLoading: false,
  error: null,
  fetchPosts: async () => {
    set({ isLoading: true, error: null });
    try {
      const response = await fetch('/api/posts');
      const posts = await response.json();
      set({ posts, isLoading: false });
    } catch (error) {
      set({ error: error.message, isLoading: false });
    }
  },
}));

// Usage
function PostList() {
  const { posts, isLoading, error, fetchPosts } = usePostsStore();

  useEffect(() => {
    fetchPosts();
  }, [fetchPosts]);

  if (isLoading) return <Loading />;
  if (error) return <Error message={error} />;
  return <div>{posts.map((post) => <PostCard post={post} />)}</div>;
}

Middleware

Persist

Persist state to localStorage:

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

interface UserPreferences {
  theme: 'light' | 'dark';
  language: string;
  setTheme: (theme: 'light' | 'dark') => void;
  setLanguage: (language: string) => void;
}

export const usePreferencesStore = create<UserPreferences>()(
  persist(
    (set) => ({
      theme: 'light',
      language: 'en',
      setTheme: (theme) => set({ theme }),
      setLanguage: (language) => set({ language }),
    }),
    {
      name: 'user-preferences', // localStorage key
      storage: createJSONStorage(() => localStorage),
      partialize: (state) => ({
        theme: state.theme,
        language: state.language,
      }), // Only persist these fields
    }
  )
);

Devtools

Redux DevTools integration:

import { create } from 'zustand';
import { devtools } from 'zustand/middleware';

export const useAppStore = create<AppState>()(
  devtools(
    (set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 }), false, 'increment'),
      decrement: () => set((state) => ({ count: state.count - 1 }), false, 'decrement'),
    }),
    { name: 'AppStore' }
  )
);

Immer

Use Immer for immutable updates:

import { create } from 'zustand';
import { immer } from 'zustand/middleware/immer';

interface TodoState {
  todos: Todo[];
  addTodo: (text: string) => void;
  toggleTodo: (id: string) => void;
}

export const useTodoStore = create<TodoState>()(
  immer((set) => ({
    todos: [],
    addTodo: (text) =>
      set((state) => {
        state.todos.push({ id: Date.now().toString(), text, done: false });
      }),
    toggleTodo: (id) =>
      set((state) => {
        const todo = state.todos.find((t) => t.id === id);
        if (todo) todo.done = !todo.done;
      }),
  }))
);

Combined Middleware

import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer';

export const useStore = create<State>()(
  devtools(
    persist(
      immer((set) => ({
        // store implementation
      })),
      { name: 'app-storage' }
    ),
    { name: 'AppStore' }
  )
);

Store Organization

Structure

stores/
├── index.ts              # Export all stores
├── auth-store.ts         # Authentication state
├── cart-store.ts         # Shopping cart
├── ui-store.ts           # UI state (modals, sidebar, etc.)
├── preferences-store.ts  # User preferences
└── selectors/
    ├── auth-selectors.ts
    └── cart-selectors.ts

Index File

// stores/index.ts
export { useAuthStore } from './auth-store';
export { useCartStore } from './cart-store';
export { useUIStore } from './ui-store';
export { usePreferencesStore } from './preferences-store';

TypeScript Patterns

Typed Actions

interface UserState {
  user: User | null;
  status: 'idle' | 'loading' | 'success' | 'error';
  error: string | null;
  setUser: (user: User) => void;
  clearUser: () => void;
  fetchUser: (id: string) => Promise<void>;
}

export const useUserStore = create<UserState>((set) => ({
  user: null,
  status: 'idle',
  error: null,
  setUser: (user) => set({ user, status: 'success', error: null }),
  clearUser: () => set({ user: null, status: 'idle', error: null }),
  fetchUser: async (id) => {
    set({ status: 'loading' });
    try {
      const user = await api.fetchUser(id);
      set({ user, status: 'success', error: null });
    } catch (error) {
      set({ status: 'error', error: error.message });
    }
  },
}));

Testing

Test Setup

// __tests__/stores/counter.test.ts
import { renderHook, act } from '@testing-library/react';
import { useCounterStore } from '@/stores/counter';

describe('useCounterStore', () => {
  beforeEach(() => {
    // Reset store before each test
    useCounterStore.setState({ count: 0 });
  });

  it('increments count', () => {
    const { result } = renderHook(() => useCounterStore());

    act(() => {
      result.current.increment();
    });

    expect(result.current.count).toBe(1);
  });

  it('decrements count', () => {
    const { result } = renderHook(() => useCounterStore());

    act(() => {
      result.current.decrement();
    });

    expect(result.current.count).toBe(-1);
  });
});

Best Practices

Do

• Keep stores focused on specific domains
• Use selectors to prevent unnecessary re-renders
• Use middleware for cross-cutting concerns
• Type all stores with TypeScript
• Extract complex logic to separate functions
• Use shallow comparison for object selections
• Persist only necessary state

Don't

• Don't put all state in one store
• Don't select entire store when only part is needed
• Don't mutate state directly (use set or Immer)
• Don't use Zustand for server state (use React Query)
• Don't persist sensitive data
• Don't forget to reset state when needed

When to Use

Use Zustand

• Client-side UI state (modals, sidebar, theme)
• Form state (multi-step forms)
• Global app state (user preferences, settings)
• Temporary state shared across components

Use React Query

• Server state (API data)
• Caching and revalidation
• Background updates
• Optimistic updates with server sync

Use React State

• Local component state
• Form inputs
• Toggle states
• State not shared with other components

Performance

Optimization

• Use selective subscriptions (don't select entire store)
• Use shallow comparison for object selections
• Batch updates when possible
• Split large stores into smaller, focused stores
• Use computed values (functions) instead of derived state

Monitoring

• Use Redux DevTools middleware in development
• Monitor render counts in React DevTools
• Profile component re-renders
• Check localStorage size if using persist