A tiny imitation of how React stores hooks
On the second render city reads slot 1, which holds the nickname. Real React is more careful: it notices the number of hooks changed and throws instead of silently mixing values.
Call hooks only at the top level of a component or a custom hook, never inside conditions, loops, nested functions or after an early return, because React matches each hook to its saved state purely by the order of the calls.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
This component breaks the rules. Rewrite it correctly:
``jsx
function Price({ amount }) {
if (amount === 0) return <p>Free</p>;
const [showTax, setShowTax] = useState(false);
return <p onClick={() => setShowTax(!showTax)}>{showTax ? amount * 1.18 : amount}</p>;
}
A Comments section should have its own useState for the new comment text, but only appear when open is true. Show the correct structure.
Explain it without notes
State the two Rules of Hooks.
Why does React need hooks to be called in the same order on every render?
How do you fix a hook that only needs to run in some situations?
What does eslint-plugin-react-hooks do?
Console
(nothing was printed)Expected console output
{ name: 'Asha', city: 'Pune' }
slots: [ 'Asha', 'Ash', 'Pune' ]
{ name: 'Asha', city: 'Ash' }