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

In React, immutability is key, requiring copies of objects for updates instead of direct mutation. While the spread operator provides a shallow copy, it can lead to issues with deeply nested data structures. `structuredClone` offers a native browser solution for deep copying. The spread operator copies first-level fields by value, but nested objects are copied by reference. This is suitable for flat state or when nested objects are immediately overwritten. `structuredClone` recursively copies various data types, including Maps and Sets, but it discards class instances and functions. Performance testing shows that the spread operator is faster for flat objects, while `structuredClone` is slower but ensures complete copying. For React patterns, shallow copies are often sufficient for local state updates. However, `structuredClone` is beneficial for creating snapshots of state in heavy forms or for undo functionality. When dealing with complex data structures, custom cloning methods or libraries like Immer can be useful. `structuredClone` handles circular references but will throw errors for functions or DOM nodes. Choosing between spread and `structuredClone` depends on the need for correctness versus micro-optimizations.