Beyond the Spread: **`structuredClone`** vs `{ ...obj }` — Deep-Copy Tactics Every React + TypeScript Engineer Should Master

Beyond the Spread: structuredClone vs { ...obj } — Deep-Copy Tactics Every React + TypeScript Engineer Should Master

Because sometimes a shallow copy just won’t cut it.

Why This Matters

In React we preach immutability: instead of mutating objects in place, you copy them, update the copy, and let React diff the changes. That’s easy for primitives and flat objects, but nested data structures can trip you up:

const updated = { ...user, address: { ...user.address, city: 'Tokyo' } };

Looks innocent… but becomes spaghetti when objects are big, or arrays are nested three layers deep. Enter structuredClone (a browser‑native deep copier) and a fresh perspective on when the spread operator is still the best tool in your belt.

1 Setting the Stage

interface Person {

  firstName: string;

  lastName:  string;

  age:       number;

  address:   Address;

}



interface Address {

  postalCode: string;

  city:       string;

}



const ironman: Person = {

  firstName: 'Tony',

  lastName:  'Stark',

  age:       45,

  address:   { postalCode: 'ABC-123', city: 'New York' },

};

We’ll clone ironman with both approaches:

const deepClone   = structuredClone(ironman); // ✨

const shallowCopy = { ...ironman };           // 🧩

2 Spread Operator { ...obj } – What Actually Gets Copied?

Fields on the first level are copied by value. Nested objects or arrays are copied by reference (shallow copy).

shallowCopy.address.city = 'Malibu';

console.log(ironman.address.city); // ➜ 'Malibu'  😱

Good enough when:

• Your state is flat.
  


• You immediately overwrite nested objects ({ ...state, nested: { ...state.nested, x: 1 }}).
  


• Performance matters; spread is faster and zero‑allocation for nested refs.

3 structuredClone — Deep Copy in One Breath

How it works

• 
  Recurses through objects, arrays, Maps, Sets, Dates, RegExps, even ArrayBuffers.
  


• 
  Skips functions, DOM nodes, and unserializable classes (will throw).
  


• 
  Keeps prototype chain? No. You get plain objects — perfect for serializable data but not class instances.
  

deepClone.address.city = 'Malibu';

console.log(ironman.address.city); // ➜ 'New York' ✅

Browser Support (July 2025)

4 Performance Showdown

👉 Rule of thumb:


Use structuredClone when you need correctness > micro‑speed, like editing drafts, implementing undo stacks, or copying API payloads before mutation.

5 React Patterns

A. Local component state

const [draft, setDraft] = useState<Person>(ironman);



function handleCityChange(city: string) {

  setDraft(prev => ({

    ...prev,

    address: { ...prev.address, city }, // OK: nested overwrite

  }));

}

B. Heavy forms / editors

Using Immer or zustand with structuredClone to snapshot pre‑edit state:

import { useRef } from 'react';



const history = useRef<Person[]>([]);



function startEdit() {

  history.current.push(structuredClone(user));

}

C. Redux Toolkit (RTK Query)

RTK uses Immer under the hood, but if you need a totally separate draft (e.g., optimistic update rollback), deep‑clone the cached entity:

const original = structuredClone(post);

6 Edge Cases & Gotchas

7 Cheat‑Sheet

Final Thoughts

Think of cloning as a surgical tool:

• 
  Spread is a scalpel — precise, minimal overhead, but fails on deep wounds.
  


• 
  structuredClone is the MRI copy machine — heavyweight but gives you a perfect replica to operate on risk‑free.

Master both and you’ll write React components that are predictable under the DevTools microscope and performant enough for production.

Happy cloning — and remember: with great copies comes great responsibility! 🕸️

✍️ Written by: Cristian Sifuentes – Full-stack dev crafting scalable apps with [NET - Azure], [Angular - React], Git, SQL & extensions. Clean code, dark themes, atomic commits