Run results for: structuredClone vs Immer

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Browser: Chrome 128

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

produce

601K/s

structuredClone

235/s

View exact numbers

Test name	Executions per second
✓ produce	600,655 Ops/sec
structuredClone	235 Ops/sec

HTML Preparation code:

<script type="module">
  import { produce } from 'https://cdn.jsdelivr.net/npm/immer@10.1.1/+esm';
  window.immerProduce = produce;
</script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uuid@10.0.0/dist/index.min.js"></script>

Script Preparation code:

const numSiblings = 500;
const depth = 3;

state = {
    data: {
        data1: {
            data2: 'test',
            siblings: Array.from({
                length: numSiblings
            }).map(() => ({
                id: crypto.randomUUID()
            })),
            children: Array.from({
                length: depth
            }).map(() => ({
                id: crypto.randomUUID(),
                data: {
                    data1: {
                        data2: 'test',
                        siblings: Array.from({
                            length: numSiblings
                        }).map(() => ({
                            id: crypto.randomUUID()
                        })),
                        children: Array.from({
                            length: depth
                        }).map(() => ({
                            id: crypto.randomUUID(),
                            data: {
                                data1: {
                                    data2: 'test',
                                    siblings: Array.from({
                                        length: numSiblings
                                    }).map(() => ({
                                        id: crypto.randomUUID()
                                    })),
                                    children: Array.from({
                                        length: depth
                                    }).map(() => ({
                                        id: crypto.randomUUID(),
                                        data: {
                                            data1: {
                                                data2: 'test',
                                                siblings: Array.from({
                                                    length: numSiblings
                                                }).map(() => ({
                                                    id: crypto.randomUUID()
                                                })),
                                            },
                                        },
                                    })),
                                },
                            },
                        })),
                    },
                },
            })),
        },
        data3: Array.from({
            length: 1000
        }).map(() => ({})),
    },
};

Tests:

produce
const result = immerProduce(state, draft => { draft.data.data1.data2 = 'updated'; for (let i; i < 500; i++) { draft.data.data1.siblilngs[i] = { id: uuidv4() }; } })
structuredClone
const result = structuredClone(state); result.data.data1.data2 = 'updated'; for (let i; i < 500; i++) { result.data.data1.siblilngs[i] = { id: uuidv4() }; }