Array Copying

How Spread Operator Prevents Mutation Bugs

Using the spread operator for array copying ensures immutability and prevents reference-related bugs that plague JavaScript applications. This technique is essential for React state management, Redux patterns, and any scenario where data integrity matters more than micro-optimizations.

TL;DR
Spread operator [...original] creates shallow array copies
Prevents mutation bugs in React state and Redux reducers
More readable than slice() or Array.from() alternatives
Essential for functional programming and immutable updates
const copy = [...original]

The Array Mutation Challenge

You're debugging a React component where state updates aren't triggering re-renders. The problem stems from directly mutating arrays instead of creating new copies. This breaks React's shallow comparison and leads to stale UI, inconsistent state, and confused developers.

// The problematic approach - direct mutation
const shoppingCart = [{ id: 1, name: 'Laptop', price: 999 }]
function addItemBuggy(cart, newItem) {
  cart.push(newItem) // Mutates original array!
  console.log('Cart after push:', cart.length, 'items')
  return cart // Same reference = no React re-render
}
const newItem = { id: 2, name: 'Mouse', price: 29 }
const updatedCart = addItemBuggy(shoppingCart, newItem)
console.log('Original cart changed:', shoppingCart.length, 'items')
console.log('Same reference?', shoppingCart === updatedCart) // true = bad!

Spread operator copying prevents these mutation issues by creating new array references that React can detect:

// The immutable solution with spread operator
const shoppingCart = [{ id: 1, name: 'Laptop', price: 999 }]
function addItemCorrect(cart, newItem) {
  const newCart = [...cart, newItem] // Creates new array!
  console.log('New cart has:', newCart.length, 'items')
  console.log('Original preserved:', cart.length, 'items')
  return newCart
}
const newItem = { id: 2, name: 'Mouse', price: 29 }
const updatedCart = addItemCorrect(shoppingCart, newItem)
console.log('Original unchanged:', shoppingCart.length, 'items')
console.log('Different reference?', shoppingCart !== updatedCart)
// true = good!

Best Practises

Use spread copying when:

✅ Managing React component state that needs re-renders
✅ Writing Redux reducers that must return new state
✅ Creating immutable data structures in functional code
✅ Preventing reference bugs in collaborative development

Avoid when:

🚩 Copying arrays with 50,000+ items frequently
🚩 Deep copying needed (spread only copies shallow)
🚩 Performance-critical game loops or animations
🚩 Legacy browsers without ES6 transpilation support

System Design Trade-offs

Aspect	Spread Copying	slice() Method	Array.from()
Readability	Excellent - clear intent	Good - familiar	Verbose - explicit
Performance	Good - single operation	Good - optimized	Slower - more overhead
Immutability	High - creates new array	High - creates new array	High - creates new array
Syntax Length	Short - [...arr]	Medium - arr.slice()	Long - Array.from(arr)
Intent Clarity	High - obviously copying	Medium - could be slicing	High - obviously copying
Browser Support	ES6+ (2015)	All browsers	ES6+ (2015)
Memory Usage	Efficient	Most efficient	Less efficient

More Code Examples

❌ Manual copying nightmare

// Manual array copying - verbose and error-prone
function updateTodoListOldWay(todos, todoId, newStatus) {
  if (!todos || !Array.isArray(todos)) {
    throw new Error('Valid todos array required')
  }
  // Manual copying with for loop - lots of boilerplate
  const copiedTodos = []
  for (let i = 0; i < todos.length; i++) {
    const todo = todos[i]
    if (todo.id === todoId) {
      // Manually create updated todo object
      const updatedTodo = {}
      for (const key in todo) {
        updatedTodo[key] = todo[key]
      }
      updatedTodo.status = newStatus
      updatedTodo.updatedAt = Date.now()
      copiedTodos.push(updatedTodo)
    } else {
      // Manually copy unchanged todo
      const copiedTodo = {}
      for (const key in todo) {
        copiedTodo[key] = todo[key]
      }
      copiedTodos.push(copiedTodo)
    }
  }
  console.log('Manual copying processed', copiedTodos.length, 'todos')
  console.log(
    'Updated todo:',
    copiedTodos.find((t) => t.id === todoId)
  )
  return copiedTodos
}
// Test data
const originalTodos = [
  { id: 1, title: 'Buy groceries', status: 'pending', createdAt: 1640995200000 },
  { id: 2, title: 'Walk the dog', status: 'completed', createdAt: 1640995300000 },
  { id: 3, title: 'Write article', status: 'pending', createdAt: 1640995400000 },
]
const manualResult = updateTodoListOldWay(originalTodos, 2, 'in-progress')
console.log('Original todos unchanged?', originalTodos[1].status === 'completed')
console.log('New array created?', manualResult !== originalTodos)

✅ Spread copying wins

// Spread operator copying - clean and immutable
function updateTodoListNewWay(todos, todoId, newStatus) {
  if (!todos || !Array.isArray(todos)) {
    throw new Error('Valid todos array required')
  }
  // Spread operator creates array copy with updated item
  const updatedTodos = todos.map((todo) => {
    if (todo.id === todoId) {
      // Spread creates new object with updated properties
      return {
        ...todo,
        status: newStatus,
        updatedAt: Date.now(),
      }
    }
    // Return unchanged todo (could also spread for consistency)
    return todo
  })
  console.log('Spread copying processed', updatedTodos.length, 'todos')
  console.log(
    'Updated todo:',
    updatedTodos.find((t) => t.id === todoId)
  )
  return updatedTodos
}
// Test data
const originalTodos = [
  { id: 1, title: 'Buy groceries', status: 'pending', createdAt: 1640995200000 },
  { id: 2, title: 'Walk the dog', status: 'completed', createdAt: 1640995300000 },
  { id: 3, title: 'Write article', status: 'pending', createdAt: 1640995400000 },
]
const spreadResult = updateTodoListNewWay(originalTodos, 2, 'in-progress')
console.log('Original todos unchanged?', originalTodos[1].status === 'completed')
console.log('New array created?', spreadResult !== originalTodos)
console.log('Updated todo status:', spreadResult[1].status)

Technical Trivia

The React State Mutation Bug of 2020: A major social media platform's notification system stopped updating when engineers directly mutated arrays in React state. Users weren't seeing new messages, causing customer support calls to spike 400% over the weekend. The bug was invisible in development but affected millions in production.

Why direct mutation failed: React uses Object.is() comparison for state changes. When arrays are mutated in-place, React sees the same reference and skips re-renders. The UI becomes stale while the underlying data changes, creating a confusing disconnect between state and display.

Spread operator prevents this class of bugs: By creating new array references, spread operators ensure React's shallow comparison detects changes. Modern React DevTools now highlight mutation anti-patterns, and ESLint rules can catch these issues before they reach production environments.

Master Immutable Updates: Copy First, Optimize Later

Default to spread operator copying for array operations in React, Redux, and functional programming contexts. The immutability benefits and bug prevention far outweigh minimal performance costs. Only optimize with direct mutations in proven performance bottlenecks, and always measure before sacrificing code clarity for speed.