Why must you treat state as immutable in React?
Quick answer
React detects changes by comparing references (Object.is). Mutating in place keeps the same reference, so React may skip the re-render.
In detail
If you push to an array or set a property on a state object and pass the same reference back, React sees no change and the UI doesn't update. Always create a new object/array with spread, map, or filter. This also keeps state predictable and is what makes memoization and time-travel debugging work.
1// ❌ mutation — same reference
2items.push(x); setItems(items);
3// ✅ new references
4setItems([...items, x]);
5setUser(u => ({ ...u, name: "Sam" }));
6setItems(items.map(i => i.id === id ? { ...i, done: true } : i));Why interviewers ask this: Immutability bugs are one of the most common real-world React issues.
Common follow-up questions
- →How do you update a nested object in state immutably?
This is 1 of 118+ questions in the React Interview Kit
Get every question with detailed answers, follow-ups and real code — plus coding challenges and a last-minute revision sheet. One-time payment, instant access.
⚡ Get the React Interview Kit → ₹399