The mirror-props bug, side by side
Both children receive the same prop. The mirrored one stays blue forever, because useState ignores its argument after the first render. Pick other colours from the menu to confirm.
If a value can be calculated from props or state, calculate it during render instead of storing it; copying a prop into state freezes it at its first value, which is fine only when the prop is meant as a starting value.
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.
A cart component stores items and total in state and updates both in addItem. Rewrite it with only the state it needs.
This component shows a stale price when the parent changes price: function Price({ price }) { const [p] = useState(price); return <b>₹{p}</b>; }. Fix it.
Explain it without notes
What is derived state and where should you compute it?
Explain the "mirror props in state" bug. Why does it happen?
When is it correct to initialise state from a prop?
A filtered list of 20,000 rows is slow to compute on every keystroke. Should you store it in state? What should you do instead?
Preview
Console
Nothing logged yet.Expected console output
Mirrored: blue
Direct: red