Hint
React bails out of re-renders when state reference is unchanged. Mutating state directly means state === newState, so React never re-renders. Always return new objects.
const state1 = { count: 0, name: 'app' };
// Direct mutation — same reference
const state2 = state1;
state2.count = 5;
// Spread — new reference
const state3 = { ...state1, count: 10 };
console.log(state1 === state2);
console.log(state1 === state3);
console.log(state1.count);
console.log(state3.count);true false 5 10
Explanation: state2 = state1 copies the reference — same object. Mutating state2.count also changes state1.count (both point to same object). state3 = {...state1} is a new object, independent.
Key Insight: React bails out of re-renders when state reference is unchanged. Mutating state directly means state === newState, so React never re-renders. Always return new objects.