Build a React Product List with ID-Based Updates and a Cart

Build a delivery-product homepage with React function components and hooks. Support adding, updating, and deleting products by ID, display quantities and prices, and let a user add products to a cart. Explain how you would adapt the interface when the catalog contains thousands of products. ### Clarifying Questions Distinguish catalog inventory quantity from cart quantity, and clarify what deleting a catalog item does to an existing cart line. No backend contract, inventory-reservation rule, or price-update policy is supplied. For the worked implementation, use a client-side catalog and cart, remove a cart line when its product is deleted, and derive cart prices from the current catalog. These are practice choices. ### What a Strong Answer Covers Normalized state, immutable ID-based updates, event handlers, derived totals, stable rendering keys, and a concrete scaling plan. Explain when effects are needed, how dependencies and request cleanup work, and how profiling guides memoization or virtualization. ### Follow-up Questions - How would you prevent a slow earlier search response from replacing a newer one? - What changes if prices must be confirmed by a server at checkout?