In this lesson, I walk you through the two golden Rules of Hooks in React 19, and more importantly, why React is so strict about them. We’ve been using state and everything feels fine, but the moment you call a hook conditionally—like creating a credits state only for premium users—you’ll see those red squiggly lines. That ESLint error isn’t being picky; it’s protecting you from bugs that are really hard to track down later. I explain Rule #1: only call hooks at the top level of your component function—no loops, no conditions, no nested functions, no event handlers, and not after early returns. Then I show the correct pattern: call useState first, and do your conditional UI with an early return after that. I also break down what’s happening behind the scenes using a “slots/queue” mental model: React tracks hooks by call order, not by variable names. If the order changes between renders, state gets mixed up—like the wrong customer getting the wrong coffee. Finally, I cover Rule #2: only call hooks from React function components (or custom hooks), and I point out that the eslint-plugin-react-hooks rules are already wired up in Vite to catch mistakes instantly.