hardFrontend

Why must React state updates be immutable?

Q: Why must React state updates be immutable?

**Core concept (TL;DR).** React decides whether to re-render by comparing the **previous and next state by reference** ( Object.is ). If you **mutate** the existing object/array, the reference is unchanged, so React thinks nothing happened and skips the update. Always produce a **new** object/array instead of editing in place. Same reference → no re-render · new reference → render mutate ✗

601 views

Understand the problem

How reference equality drives bailouts and concurrent correctness.

reactstateimmutability

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Explore the playground snippets

New reference vs. in-place mutation

Run Playground

import { useState } from 'react';

export default function App() {
  const [todos, setTodos] = useState([{ id: 1, text: 'Learn immutability' }]);
  const [text, setText] = useState('');

  function addCorrect() {
    if (!text.trim()) return;
    setTodos((prev) => [...prev, { id: Date.now(), text }]); // NEW array -> re-renders
    setText('');
  }
  function addBroken() {
    todos.push({ id: Date.now(), text: text || 'mutated' }); // same reference -> no re-render
    setText('');
  }

  return (
    <div style={{ fontFamily: 'sans-serif', padding: 24 }}>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={addCorrect}>Add (immutable)</button>{' '}
      <button onClick={addBroken}>Add (mutate — UI won't update)</button>
      <ul>{todos.map((t) => <li key={t.id}>{t.text}</li>)}</ul>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

Why does updating Context re-render all its consumers, and how do you fix it?

Compare render-as-you-fetch, fetch-on-render, and fetch-then-render.