1// Pattern 1: any defeats TypeScript completely
2function addToCart(item: any) { // no type safety at all
any: TypeScript cannot catch property typos, wrong types, or missing fields on this parameter
3  window.cart.push(item); // global mutable state
window.cart: any code anywhere can corrupt this. No single source of truth. Untraceable mutations.
4  updateCartUI(); // manual DOM sync — you will forget this somewhere
5}
6 
7// Pattern 2: prop drilling through 5 levels
8function App() {
9  const [cart, setCart] = useState([]);
10  return <Page cart={cart} setCart={setCart} />;
11}
12function Page({ cart, setCart }) { // passes down 2 more levels
13  return <Section cart={cart} setCart={setCart} />;
14}
15// ... 3 more levels until CartItem actually needs it
16 
17// Pattern 3: interface with optional everything
Prop drilling: adding a new cart action requires touching 5 files. Zustand eliminates this entirely.
18interface CartItem {
19  id?: string;       // optional means every consumer must null-check
20  name?: string;
21  price?: number;    // price could be undefined — NaN in totals
22  quantity?: number;
Optional price: cart.reduce((sum, item) => sum + item.price, 0) returns NaN if any price is undefined
23}

1// Production cart store — the version that survives 4-team code review
2import { create } from 'zustand';
3import { devtools } from 'zustand/middleware';
4 
5interface CartItem {
All CartItem fields required: invalid state is unrepresentable at the type level
6  id: string;
7  name: string;
8  price: number;
9  quantity: number;
10  imageUrl: string;
11}
12 
13interface CartState {
14  items: CartItem[];
15  addItem: (item: Omit<CartItem, 'quantity'>) => void;
16  removeItem: (id: string) => void;
17  updateQuantity: (id: string, quantity: number) => void;
18  clearCart: () => void;
19  // Derived state as selectors — never stored, always computed
20  totalItems: () => number;
21  totalPrice: () => number;
22}
23 
24export const useCartStore = create<CartState>()(
devtools middleware: time-travel debugging in Redux DevTools, free with Zustand
25  devtools( // enables Redux DevTools for time-travel debugging
26    (set, get) => ({
27      items: [],
28 
addItem checks for existing item: idempotent, quantity increments instead of duplicate entries
29      addItem: (item) => set(state => {
30        const existing = state.items.find(i => i.id === item.id);
31        if (existing) {
32          return { items: state.items.map(i =>
33            i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i
34          )};
35        }
36        return { items: [...state.items, { ...item, quantity: 1 }] };
37      }),
38 
39      removeItem: (id) => set(state => ({
40        items: state.items.filter(i => i.id !== id),
41      })),
42 
43      updateQuantity: (id, quantity) => set(state => ({
44        items: quantity <= 0
45          ? state.items.filter(i => i.id !== id)
46          : state.items.map(i => i.id === id ? { ...i, quantity } : i),
47      })),
48 
49      clearCart: () => set({ items: [] }),
Selectors as functions in the store: computed on demand, no stale derived state to synchronise
50 
51      // Selectors: components subscribe to these, not the whole store
52      totalItems: () => get().items.reduce((sum, i) => sum + i.quantity, 0),
53      totalPrice: () => get().items.reduce((sum, i) => sum + i.price * i.quantity, 0),
54    })
55  )
56);
57 
Component subscribes to one selector: only re-renders when totalItems() changes, not on any cart mutation
58// Component subscribes only to what it needs — no unnecessary re-renders
59function CartBadge() {
60  const totalItems = useCartStore(state => state.totalItems());
61  return <span aria-label={`${totalItems} items in cart`}>{totalItems}</span>;
62}