Zustand for Simple State Management

Zustand provides minimal, flexible state management. Here's how to use it effectively.

Basic Store#

import { create } from 'zustand';

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

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

// Usage in component
function Counter() {
  const count = useCounterStore((state) => state.count);
  const increment = useCounterStore((state) => state.increment);

  return (
    <button onClick={increment}>
      Count: {count}
    </button>
  );
}

// Or destructure multiple values
function Counter() {
  const { count, increment, decrement } = useCounterStore();

  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  );
}

Async Actions#

interface UserStore {
  user: User | null;
  loading: boolean;
  error: string | null;
  fetchUser: (id: string) => Promise<void>;
  updateUser: (data: Partial<User>) => Promise<void>;
}

const useUserStore = create<UserStore>((set, get) => ({
  user: null,
  loading: false,
  error: null,

  fetchUser: async (id: string) => {
    set({ loading: true, error: null });

    try {
      const response = await fetch(`/api/users/${id}`);
      const user = await response.json();
      set({ user, loading: false });
    } catch (error) {
      set({ error: (error as Error).message, loading: false });
    }
  },

  updateUser: async (data: Partial<User>) => {
    const currentUser = get().user;
    if (!currentUser) return;

    // Optimistic update
    set({ user: { ...currentUser, ...data } });

    try {
      await fetch(`/api/users/${currentUser.id}`, {
        method: 'PATCH',
        body: JSON.stringify(data),
      });
    } catch (error) {
      // Rollback on error
      set({ user: currentUser, error: (error as Error).message });
    }
  },
}));

Selectors#

// Selector to prevent unnecessary re-renders
function UserName() {
  // Only re-renders when user.name changes
  const userName = useUserStore((state) => state.user?.name);
  return <span>{userName}</span>;
}

// Multiple selectors with shallow comparison
import { shallow } from 'zustand/shallow';

function UserInfo() {
  const { name, email } = useUserStore(
    (state) => ({ name: state.user?.name, email: state.user?.email }),
    shallow
  );

  return (
    <div>
      <p>{name}</p>
      <p>{email}</p>
    </div>
  );
}

// Create reusable selectors
const selectUser = (state: UserStore) => state.user;
const selectLoading = (state: UserStore) => state.loading;
const selectUserName = (state: UserStore) => state.user?.name;

function Profile() {
  const user = useUserStore(selectUser);
  const loading = useUserStore(selectLoading);

  if (loading) return <Spinner />;
  return <div>{user?.name}</div>;
}

Middleware#

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

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

const useTodoStore = create<TodoStore>()(
  devtools(
    persist(
      subscribeWithSelector(
        immer((set) => ({
          todos: [],

          addTodo: (text: string) =>
            set((state) => {
              state.todos.push({
                id: Date.now().toString(),
                text,
                completed: false,
              });
            }),

          toggleTodo: (id: string) =>
            set((state) => {
              const todo = state.todos.find((t) => t.id === id);
              if (todo) {
                todo.completed = !todo.completed;
              }
            }),

          removeTodo: (id: string) =>
            set((state) => {
              state.todos = state.todos.filter((t) => t.id !== id);
            }),
        }))
      ),
      {
        name: 'todo-storage', // localStorage key
      }
    ),
    { name: 'TodoStore' } // DevTools name
  )
);

Persist Middleware#

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

const useAuthStore = create<AuthStore>()(
  persist(
    (set) => ({
      token: null,
      user: null,
      setAuth: (token, user) => set({ token, user }),
      logout: () => set({ token: null, user: null }),
    }),
    {
      name: 'auth-storage',
      storage: createJSONStorage(() => sessionStorage), // Default: localStorage
      partialize: (state) => ({ token: state.token }), // Only persist token
      onRehydrateStorage: () => (state) => {
        console.log('Hydration finished', state);
      },
    }
  )
);

// Custom storage (e.g., AsyncStorage for React Native)
const useStore = create(
  persist(
    (set) => ({ ... }),
    {
      name: 'my-storage',
      storage: createJSONStorage(() => ({
        getItem: async (name) => {
          return await AsyncStorage.getItem(name);
        },
        setItem: async (name, value) => {
          await AsyncStorage.setItem(name, value);
        },
        removeItem: async (name) => {
          await AsyncStorage.removeItem(name);
        },
      })),
    }
  )
);

Slices Pattern#

// Split store into slices
interface UserSlice {
  user: User | null;
  setUser: (user: User) => void;
}

interface CartSlice {
  items: CartItem[];
  addItem: (item: CartItem) => void;
  removeItem: (id: string) => void;
}

const createUserSlice = (set: any): UserSlice => ({
  user: null,
  setUser: (user) => set({ user }),
});

const createCartSlice = (set: any): CartSlice => ({
  items: [],
  addItem: (item) =>
    set((state: any) => ({ items: [...state.items, item] })),
  removeItem: (id) =>
    set((state: any) => ({
      items: state.items.filter((i: CartItem) => i.id !== id),
    })),
});

// Combine slices
type StoreState = UserSlice & CartSlice;

const useStore = create<StoreState>()((...args) => ({
  ...createUserSlice(...args),
  ...createCartSlice(...args),
}));

import { subscribeWithSelector } from 'zustand/middleware';

const useStore = create<Store>()(
  subscribeWithSelector((set) => ({
    count: 0,
    increment: () => set((state) => ({ count: state.count + 1 })),
  }))
);

// Subscribe to specific state changes
const unsubscribe = useStore.subscribe(
  (state) => state.count,
  (count, prevCount) => {
    console.log('Count changed from', prevCount, 'to', count);
  },
  {
    equalityFn: shallow,
    fireImmediately: true,
  }
);

// Subscribe outside React
useStore.subscribe((state) => {
  console.log('State changed:', state);
});

// Get state outside React
const count = useStore.getState().count;

// Set state outside React
useStore.setState({ count: 10 });

With TypeScript#

import { create, StateCreator } from 'zustand';

// Typed store creator for slices
type UserSlice = {
  user: User | null;
  fetchUser: (id: string) => Promise<void>;
};

type CartSlice = {
  items: CartItem[];
  total: number;
  addItem: (item: CartItem) => void;
};

type Store = UserSlice & CartSlice;

const createUserSlice: StateCreator<Store, [], [], UserSlice> = (set) => ({
  user: null,
  fetchUser: async (id) => {
    const user = await fetchUser(id);
    set({ user });
  },
});

const createCartSlice: StateCreator<Store, [], [], CartSlice> = (set, get) => ({
  items: [],
  total: 0,
  addItem: (item) =>
    set((state) => ({
      items: [...state.items, item],
      total: state.total + item.price,
    })),
});

const useStore = create<Store>()((...a) => ({
  ...createUserSlice(...a),
  ...createCartSlice(...a),
}));

Testing#

import { act, renderHook } from '@testing-library/react';

// Reset store between tests
const initialState = useStore.getState();

beforeEach(() => {
  useStore.setState(initialState);
});

test('increments count', () => {
  const { result } = renderHook(() => useStore());

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

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

// Mock store for component tests
const mockStore = create<Store>()((set) => ({
  count: 5,
  increment: jest.fn(),
}));

jest.mock('./store', () => ({
  useStore: mockStore,
}));

Best Practices#

Structure:
✓ Keep stores focused
✓ Use slices for large stores
✓ Separate actions from state
✓ Use TypeScript for safety

Performance:
✓ Use selectors to minimize re-renders
✓ Use shallow comparison for objects
✓ Subscribe only to needed state
✓ Avoid selecting entire store

Patterns:
✓ Use middleware for cross-cutting concerns
✓ Persist only necessary state
✓ Use immer for complex updates
✓ Reset stores in tests

Zustand provides simple, powerful state management with minimal boilerplate. Use selectors for performance, middleware for persistence and devtools, and slices for organizing larger stores. Its hooks-based API integrates naturally with React while remaining flexible for complex use cases.