Cart Management Skill

Patterns for React cart state: duplicate prevention, persistence, context design.

Duplicate Prevention

• Track product IDs in CartContext (separate state or derived from cartItems)
• Check productIdsInCart.includes(item.id) before add
• Centralize logic in context, not in ProductCard or child components

Persistence (localStorage)

• Initialize cart state from localStorage.getItem('cart') on mount
• Persist on every add/remove: localStorage.setItem('cart', JSON.stringify(cartItems))
• Sync productIdsInCart if used: localStorage.setItem('cart_ids', JSON.stringify(ids))
• Prevents duplicates across sessions (refresh, new tab)

CartContext Pattern