Data & state (checkout tip bug)
Explain why tip must be retained for checkout total, and prove it on a fresh isomorphic scenario.
REAL PROBLEM: A customer picks a tip at checkout, but the total on screen still shows only the item price. The tip appears selected, then vanishes from the math. WHY this matters: Money is wrong in a way that feels small until it happens hundreds of times. Undercharging destroys trust and revenue; overcharging creates chargebacks. The bug is not "UI looks fine" — it is state that was never retained for the calculation. HOW it usually happens: The tip percent lives in a temporary click handler. The total function recomputes from item price alone. Nothing durable holds tipAmount or tipPercent when the total is rendered. GUIDED QUESTIONS: What value disappeared between selection and total? Where should that value live so every redraw can see it? What happens if the customer changes the tip after the first selection? CONCEPT: Variables (and component/app state) exist to retain values across steps. If a calculation needs tip and price, both must be stored and reused — not re-derived from a missing place. A function that computes total should take the retained tip (or percent) as an input, not invent zero.
Key takeaways
- WHY this matters: Money is wrong in a way that feels small until it happens hundreds of times.
- HOW it usually happens: The tip percent lives in a temporary click handler.
- GUIDED QUESTIONS: What value disappeared between selection and total?
Sign in to complete activities, save progress, and use the AI Coach.
Evergreen instructional material; no time-sensitive claims to source.
Evergreen curriculum written from KleinHub teaching material — no time-sensitive claims.
AI-generated lesson, reviewed by Education Review and approved through the KleinHub approval queue before publication.
Sign in to complete this lesson, track progress, and use the AI Coach.
Sign in to start lessonCreate account