structuredClone(): an independent copy of nested data

Useful to know

When editing nested data, a shallow copy can leave common internal objects . structuredClone() uses the structured cloning algorithm to create a deep copy of the supported values. Not every arbitrary value is clonal. [1]

For example, const original = {settings: {theme: 'light'}}; const copy = structuredClone(original); copy.settings.theme = 'dark';. In this example, original.settings.theme remains 'light'. The two nested objects are now separate.

This is convenient for editing a draft in an interface when you don't want the changes to be reflected immediately in the output state. It is not a disk storage mechanism: the copy remains data in memory.

There is also a transfer of transferable objects. With it, the resource can be separated from the original, instead of two independent uses remaining. [1] Do not add a transfer, option if you do not understand this difference. For a simple nested configuration like the example, it is not needed.