Frontend State Zustand

When to use this skill

• Managing global client state
• Simpler alternative to Redux
• Sharing state across components

Workflow

• ] Create store with create
• ] Define state and actions
• ] Use selectors to prevent re-renders
• ] Split into slices for large stores
• ] Persist with middleware if needed

Instructions

Basic Store

typescript
import { create } from 'zustand';

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

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

// Usage
function Counter() {
  const count = useStore(state => state.count);
  const increment = useStore(state => state.increment);
  
  return <button onClick={increment}>{count}</button>;
}

Slices Pattern

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

const createCartSlice = (set) => ({
  items: [],
  addItem: (item) => set((state) => ({ 
    items: [...state.items, item] 
  }))
});

export const useStore = create((set) => ({
  ...createUserSlice(set),
  ...createCartSlice(set)
}));

Resources

• Use selectors to optimize
• Split large stores into slices
• Persist with zustand/middleware/persist