useState Hook, Conditional Rendering and Derived Values

A. useState creates a value that React keeps track of, and calling its setter updates that value while triggering a re render. On the product details page, const [qty, setQty] = useState(1) tracks the selected quantity, and clicking the plus or minus buttons calls setQty with Math.min or Math.max, keeping it between 1 and the available stock.

B. Conditional rendering means showing different content depending on some condition, instead of a fixed layout. The cart page checks cartLines.length === 0 before deciding what to show, rendering an empty cart message with a shop now button if true, or the full cart layout with items and totals if false.

C. Derived values are calculated from existing state instead of being stored separately. Cart subtotal and cart count in FalCon Store are calculated using useMemo, running cartLines.reduce((s, l) => s + l.price * l.qty, 0) for the subtotal, so they recalculate only when the cart changes and stay accurate without needing their own state variable.