Accidental Object Mutation Bugs

TL;DR

Explanation

JavaScript passes objects and arrays by reference. Mutating a function parameter mutates the caller's object. Common in: React state mutations (never mutate state directly), Redux reducers, array methods (sort(), splice(), reverse() mutate in place vs map(), filter(), slice() which return new arrays). Solutions: spread to clone ({...obj}), structuredClone() for deep clone, Object.freeze() to prevent mutation, immutable patterns. Mutation detection: Redux DevTools, React StrictMode double-invokes reducers to catch mutations.

Common Misconception

Why It Matters

Common Mistakes

• Sorting arrays in place without cloning: users.sort() mutates the original.
• Mutating React state directly: state.items.push(item) — never re-renders.
• Not knowing splice() mutates but slice() doesn't.

Code Examples

// React anti-pattern — direct state mutation:
const [items, setItems] = useState([]);
function addItem(item) {
    items.push(item); // Mutates state — React won't re-render
    setItems(items);
}

// Immutable patterns:
function addItem(item) {
    setItems(prev => [...prev, item]); // New array — React re-renders
}

// Sort without mutation:
const sorted = [...users].sort((a, b) => a.name.localeCompare(b.name));

// Deep clone:
const safeCopy = structuredClone(complexObject);

References

• ↗ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/structuredClone

Tags

Related Terms