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: INLINECODE2
• Sync productIdsInCart if used: INLINECODE3
• Prevents duplicates across sessions (refresh, new tab)

CartContext Pattern

CODEBLOCK0

Anti-Patterns

• - Don't add to cart in useEffect on ProductCard mount (causes duplicates)
• Don't duplicate logic in multiple components – use context
• Add backend validation as fallback for data integrity

Quantity Updates

For same-product quantity: use cartItems.map() to update item.quantity, don't create duplicate entries.