Shallow copy vs deep copy — what does spread copy?

Spread copies only the first level. Nested objects stay shared.

const original = { profile: { name: 'Anna' } };
const shallow = { ...original };
const deep = structuredClone(original);
shallow.profile.name = 'Ola';
console.log(original.profile.name); // Ola
console.log(deep.profile.name);     // Anna

To be precise: structuredClone handles many data types and cycles, but not functions or every kind of object.

Pitfall: JSON stringify/parse loses some information and doesn't handle cycles. In React it's often enough to copy just the path you change, instead of deep-cloning the whole state.