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 onClick={increment}>Increment</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.tsIndex 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