State with Objects and Arrays

When state holds objects or arrays, you need to be careful to update them correctly. React requires immutable updates to detect changes.

The Immutability Rule

React uses reference comparison to detect changes. You must create new objects/arrays, not mutate existing ones:

Updating Objects

Always spread the existing object and override specific properties:

Updating Arrays

Arrays also need immutable updates using methods that return new arrays:

Common Patterns

Exercise: Update Nested Object

Exercise: Array CRUD Operations

Exercise: Complex State Update

Key Takeaways

1. Never mutate - Always create new objects/arrays
2. Spread operator - {...obj} and [...arr] create copies
3. Nested updates - Spread at each level of nesting
4. Array methods - Use map, filter, spread for updates
5. Reference check - React needs new references to re-render