Run results for: structuredClone vs Immer

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36 Edg/148.0.0.0

Browser: Chrome 148

Operating system: Windows

Device Platform: Desktop

Date tested: 2 months ago

produce

298K/s

structuredClone

107/s

View exact numbers

Test name	Executions per second
✓ produce	297,893 Ops/sec
structuredClone	107 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() }; }