Exercise 1: Why This Course's Cleanup Discipline Is a Real Cost, Not Just a Style Difference — Possible Solution ==================================================================== HOW THE REACT-BASED SIBLING COURSES HANDLE THIS ------------------------------ In Food Tracker (React + Express) and Food Tracker (React + Firebase), the scanning logic lives inside a useEffect hook, whose own return value is a cleanup function React guarantees will run automatically whenever the component unmounts - there's no way to write the effect correctly and simply forget the cleanup, because the mechanism for tying cleanup to unmounting is built directly into React itself. HOW THIS COURSE HANDLES IT INSTEAD ------------------------------ This course has no framework managing component lifecycles at all - views are just plain
elements shown and hidden with a CSS class. There is no equivalent "unmount" event that could automatically trigger stopScanner(). Instead, the developer has to remember to call stopScanner() explicitly, by name, at every single place the user might navigate away from the scan view. WHY THIS IS A REAL COST ------------------------------ Because nothing in the language or the DOM enforces this the way React's own effect-cleanup mechanism does, it's entirely possible to correctly build a new way to leave the scan view later and simply forget to add a stopScanner() call there - a mistake React's own model makes structurally difficult to make in the first place. This isn't a difference in code style; it's a genuine tradeoff of Chapter 1's own deliberate choice to skip a framework. WHY THIS WORKS AS AN ANSWER ------------------------------ It correctly explains React's own automatic, guaranteed cleanup mechanism, correctly explains why no equivalent guarantee exists in a framework-free vanilla JS app, and correctly frames the difference as a genuine cost rather than a stylistic preference.