The Hidden Cost of Mutable State in JavaScript

Most JavaScript mutation bugs have the same shape: two parts of the program hold a reference to the same object, one changes it, and the other is surprised. The fix is rarely “never mutate”. It is knowing who owns a piece of data, copying at the boundaries, and choosing methods that don’t change their input. This post shows how references work, the built-in methods that mutate quietly, and a practical policy for when to mutate and when to copy.

Why It Matters

Mutation bugs are expensive because the symptom appears far from the cause:

• A function three files away sorts an array “just to read it”, and a table elsewhere renders in the wrong order.
• A React component pushes into an array in state, and nothing re-renders.
• A cache returns an object that a caller then edits, corrupting the cache for everyone.

None of these crash; they produce subtly wrong data.

Variables Hold References, Not Objects

Primitives (numbers, strings, booleans, null, undefined, symbols, bigints) are values. Objects, arrays, maps, dates and functions live on the heap, and a variable holds a reference to them. Assigning or passing an object copies the reference, not the object:

const user = { name: 'Ada', tags: ['admin'] };
const copy = { ...user };
 
copy.name = 'Grace'; // only the copy changes
copy.tags.push('owner'); // the nested array is shared
 
user.name; // 'Ada'
user.tags; // ['admin', 'owner']

Spread and Object.assign make shallow copies: one new object, the same nested references. For a deep copy of plain data, use structuredClone, which handles nested objects, arrays, Map, Set and Date. It throws a DataCloneError on functions and DOM nodes, and class instances come back as plain objects, without their prototype or #private fields.

const doesn’t help here. It stops you from pointing the variable somewhere else, not from changing what it points to.

Methods That Mutate Quietly

Many array methods change the array you call them on. The dangerous ones look like they only read:

const original = [3, 1, 2];
const sorted = original.sort();
 
original; // [1, 2, 3]: changed!
sorted === original; // true: same array

The right-hand methods (ES2023) are available in every current browser and Node.js 20+. Date setters (setFullYear, setDate…) also mutate, which is a classic source of bugs when one date object is shared between a form and a calendar.

Where It Bites

Functions That Edit Their Arguments

function addItem(cart, item) {
  cart.items.push(item); // edits the caller’s object
  return cart;
}

The caller may not expect cart to change, and returning it makes it look like a new value. Either name the function after what it does (addItemInPlace) or return a new object: return { ...cart, items: [...cart.items, item] }.

React and Other Change-Detecting UIs

React decides whether to re-render by comparing references. Mutating state in place keeps the same reference, so nothing updates:

// Bug: same array, React sees no change
setTodos((todos) => {
  todos.push(newTodo);
  return todos;
});
 
// Fix: a new array
setTodos((todos) => [...todos, newTodo]);

The same rule drives useMemo and useEffect dependencies, Redux selectors and Angular OnPush: if the reference didn’t change, the framework assumes the data didn’t either.

Caches and Module-Level Objects

• A cache that returns its stored object lets every caller edit the shared copy. Return a copy, or freeze what you store.
• Module-level objects are singletons (each module runs once), so mutating one changes it for every importer. See how modules share state.

Async Code

When two async operations read the same object, modify it and write it back, they can interleave and lose updates. That is a race condition, covered in detail in race conditions in JavaScript.

A Practical Policy

You don’t need a library or a rule against mutation. You need clear ownership:

• Mutate locally, share immutably. Building an array with push inside a function is fine; nobody else can see it yet. Once you hand it out, stop changing it.
• Freeze shared configuration. Object.freeze makes writes fail loudly in strict code (every module is strict). It is shallow, so freeze nested objects too, or freeze only in development to catch mistakes.
• Use structural sharing for large state. Copy the path you change and reuse the rest: { ...state, user: { ...state.user, name } }. Immer does this for you with a mutable-looking API.
• Type it. TypeScript’s readonly and Readonly<T> turn many mutation bugs into compile errors, at zero runtime cost.

Going Deeper: Copying Without Paying for It

“Copy instead of mutate” sounds expensive: does every update copy the whole state? No. An immutable update copies only the path from the root to the value that changed, and every untouched branch is reused by reference. This is called structural sharing:

const next = {
  ...state, // copies two references, not the whole tree
  user: { ...state.user, name: 'Grace' },
};
next.settings === state.settings; // true: shared
next.user === state.user; // false: the changed path is new

That is also why change detection is cheap: React, Redux selectors and memoization compare references (Object.is), and only the changed path has new ones.

Tools for the cases where hand-written spreads get messy:

The senior-level rule of thumb: immutability is a boundary decision, not a religion. Treat shared state, props, cached values and anything crossing module or async boundaries as immutable; mutate freely inside a function on objects it created and nobody else can see yet.

When Mutation Is the Right Choice

Test Yourself

Predict the output, then open the answer. Every answer was checked by running the code.

const a = { tags: ['x'] };
const b = { ...a };
b.tags.push('y');
b.name = 'copy';
console.log(a.tags, a.name);

const scores = [10, 9, 1];
const sorted = scores.sort();
console.log(scores, sorted === scores);

const config = Object.freeze({ retries: 3, limits: { max: 10 } });
config.limits.max = 99;
try {
  config.retries = 5;
} catch (error) {
  console.log(error.constructor.name);
}
console.log(config.retries, config.limits.max);

function add(item, list = []) {
  list.push(item);
  return list;
}
console.log(add(1), add(2));

const original = { when: new Date(0), seen: new Map([['a', 1]]) };
const copy = structuredClone(original);
copy.seen.set('b', 2);
console.log(original.seen.size, copy.when instanceof Date, copy.when === original.when);

const grid = Array(2).fill([]);
grid[0].push('x');
console.log(grid);

Key Takeaways

Sources

• MDN: Shallow copy and structuredClone()
• MDN: Array.prototype.toSorted()
• React docs: Updating arrays in state
• Immer: Introduction
• TC39: Change Array by copy