-
Notifications
You must be signed in to change notification settings - Fork 17
perf: Stabilize Cart context function references with useCallback/useMemo #15
Copy link
Copy link
Open
Description
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
-
addToCart,removeFromCart,updateQuantity,clearCartare wrapped withuseCallbackwith correct dependency arrays -
getTotalItemsandgetTotalPriceare replaced with memoized values usinguseMemo - Components consuming cart context do not re-render unnecessarily when unrelated cart state changes
- All existing cart functionality (add, remove, update quantity, clear, totals) continues to work correctly
- No change to visible behavior for the user
Files
frontend/src/context/CartContext.tsx
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels