Spread is shallow (plain JavaScript)
{ ...person } copies the reference to address, not the object itself, so changing copy.address.city also changes person. Copy each nested level you change.
Treat objects in state as read-only: to change one, create a new object (usually with spread { ...obj, field: value }, copying every level you change in nested objects) and pass it to the setter, because React detects changes by comparing references.
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.
State is { name: "Asha", settings: { theme: "light", fontSize: 16 } }. Write a handler that switches the theme to dark without mutating.
Write a Score component with state { player: "Ravi", points: 0 } and a button that adds 5 points with an updater function.
Explain it without notes
Why doesn't position.x = 5; setPosition(position) re-render?
How do you update one field of an object in state? And one field of a nested object?
What does "spread is shallow" mean, and why does it matter?
What does Immer do, and when would you use it?
Console
(nothing was printed)Expected console output
Asha Delhi
true
Delhi Goa false