Updating a nested object
The old snapshot is untouched. Only the objects on the path to the change are new; contact is shared between the old and new state, which costs nothing.
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?
Preview
Console
Nothing logged yet.Expected console output
old city: Hamburg | new city: Mumbai
same person object? false
same artwork object? false
same contact object? true