Product List with Cart

Community feedback

• 

  P

  Habeeb Kareem•980

  @olaide-hok

  Posted about 1 month ago

  Great work here!

  🔧 Here are some improvement recommendations

  1. Performance Optimizations

  • Inline functions in render may cause unnecessary re-renders
  • No memoization of expensive calculations

  You can consider the approach below:

  // Memoize product list
  const products = useMemo(() => data.map(item => (
    <ProductCard key={item.id} item={item} {...props} />
  )), [data, props]);
  
  // Memoize total calculations
  const totalQuantity = useMemo(() => (
    cartItems.reduce((sum, item) => sum + item.quantity, 0)
  ), [cartItems]);
  

  2. Cart Logic Enhancements

  • Duplicate items can be added to cart
  • Quantity updates could be more efficient

  You can consider the approach below:

  function addToCart(productItem) {
    setCartItems(current => {
      const existing = current.find(item => item.id === productItem.id);
      return existing
        ? current.map(item => 
            item.id === productItem.id 
              ? {...item, quantity: item.quantity + 1} 
              : item
          )
        : [...current, {...productItem, quantity: 1}];
    });
  }
  

  3. Component Improvements

  A. Extract CartItem and ProductCard

  • Both Cart and ProductList contain large repetitive JSX blocks.

  Suggestion:

  • Extract ProductCard for each product in ProductList
  • Extract CartItem for each item in Cart
  • Extract OrderItem from Order for consistency

  This would improve readability, testability, and component reusability.

  Overall, your code was well structured, the UX was responsive and good state management with the useState hook.

  Happy Coding!

  12

  Marked as helpful