User Story
As a shopper browsing products,
I want the product listing and navigation to remain responsive when I add or modify items in my cart,
so that interacting with the cart doesn't cause unnecessary page slowdowns.
Problem
All functions in CartContext (addToCart, removeFromCart, updateQuantity, clearCart, getTotalItems, getTotalPrice) are recreated on every render and passed directly through context. Every component that consumes CartContext will re-render on any state change, even if the component doesn't depend on the changed value.
// Current — new function references on every render
const addToCart = (product, quantity) => { ... };
const removeFromCart = (productId) => { ... };
// etc.
Acceptance Criteria
Files
frontend/src/context/CartContext.tsx
User Story
As a shopper browsing products,
I want the product listing and navigation to remain responsive when I add or modify items in my cart,
so that interacting with the cart doesn't cause unnecessary page slowdowns.
Problem
All functions in
CartContext(addToCart,removeFromCart,updateQuantity,clearCart,getTotalItems,getTotalPrice) are recreated on every render and passed directly through context. Every component that consumesCartContextwill re-render on any state change, even if the component doesn't depend on the changed value.Acceptance Criteria
addToCart,removeFromCart,updateQuantity,clearCartare wrapped withuseCallbackwith correct dependency arraysgetTotalItemsandgetTotalPriceare replaced with memoized values usinguseMemoFiles
frontend/src/context/CartContext.tsx