javascript 35 lines · 7 steps

Deep cloning with structuredClone

How to build safe deep copies with structuredClone, including capability checks and cloner-aware error handling.

Explained by highlit

Intermediate deep-copy error-handling immutability serialization

1export function cloneState(state) {
if (typeof structuredClone !== "function") {
  throw new Error("structuredClone is not available in this runtime");
}
5 
try {
  return structuredClone(state);
} catch (err) {
  if (err instanceof DOMException && err.name === "DataCloneError") {
    throw new TypeError(
      "State contains non-cloneable values (functions, DOM nodes, or class instances with private fields)",
      { cause: err }
    );
  }
  throw err;
}
17}
18 
19export function withTransferables(payload, transfer) {
return structuredClone(payload, { transfer });
21}
22 
23export function snapshotStore(store) {
const draft = {
  entities: store.entities,
  filters: new Map(store.filters),
  lastFetched: new Date(store.lastFetched),
  pending: new Set(store.pending),
  buffer: store.buffer,
};
31 
const clone = structuredClone(draft);
Object.freeze(clone);
return clone;
35}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1structuredClone deep-copies Maps, Sets, Dates, and typed arrays that JSON round-tripping would silently destroy.
2Cloning throws a DataCloneError DOMException for functions, DOM nodes, and other non-serializable values, so guard for it.
3Pairing a clone with Object.freeze yields an isolated, tamper-proof snapshot of mutable state.

Related explainers

php

<?php
 
namespace App\Http\Requests\DataObjects;

Typed request DTOs in Laravel

data-transfer-object validation immutability

Intermediate 6 steps

javascript

import { useCallback, useEffect, useState } from 'react';
 
export function useLocalStorage(key, initialValue) {
  const readValue = useCallback(() => {

How a useLocalStorage hook syncs state in React

custom hooks localstorage state persistence

Intermediate 8 steps

python

from fastapi import FastAPI, Request, status
from fastapi.encoders import jsonable_encoder
from fastapi.exceptions import RequestValidationError
from fastapi.responses import JSONResponse

Redacting sensitive fields in FastAPI errors

validation error-handling security

Intermediate 7 steps

javascript

import { useState } from 'react';
 
export function ReorderableList({ initialItems }) {
  const [items, setItems] = useState(initialItems);

Drag-to-reorder lists in React

drag-and-drop state-management immutable-updates

Intermediate 8 steps

java

import com.fasterxml.jackson.core.JsonGenerator;
import com.fasterxml.jackson.databind.JsonSerializer;
import com.fasterxml.jackson.databind.SerializerProvider;
import com.fasterxml.jackson.databind.module.SimpleModule;