Benchmark: structuredClone vs Immer Produce

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/immer@3.1.3/dist/immer.umd.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/uuid@8.3.2/dist/umd/uuidv4.min.js"></script>

Script Preparation code:

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

Tests:

immer.produce()
const result = immer.produce(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() }; }

Historical Performance Data aggregated from 58 community runs

Desktop Results:

Chrome 50 runs

immer.produce()

438K/s

structuredClone

150/s

Fastest: immer.produce() (2929.3x faster)

View exact numbers

✓ immer.produce(): 438,383 ops/sec
• structuredClone: 150 ops/sec

Firefox 8 runs

immer.produce()

465K/s

structuredClone

287/s

Fastest: immer.produce() (1620.2x faster)

View exact numbers

✓ immer.produce(): 465,387 ops/sec
• structuredClone: 287 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
immer.produce()
structuredClone

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:152.0) Gecko/20100101 Firefox/152.0

Browser/OS: Firefox 152 on Mac OS X 10.15

View result in a separate tab

immer.produce()

769K/s

structuredClone

460/s

View exact numbers

Test name	Executions per second
✓ immer.produce()	768,936 Ops/sec
structuredClone	460 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares two approaches to update nested objects in JavaScript: `immer.produce()` and `structuredClone()`. The test case creates a complex object structure with multiple levels of nesting, and then updates specific properties using both methods.

**Options Compared**

1. **Immer**: Immer is a library that provides a way to create immutable versions of arrays and objects. It achieves this by creating a "draft" version of the data, which can be modified in place without affecting the original data.
2. **Structured Clone**: Structured clone is a mechanism for cloning complex JavaScript data structures, such as nested objects and arrays. It creates a new copy of the data, rather than modifying the original.

**Pros and Cons**

**Immer:**

Pros:

* Immer provides a way to update nested objects in place, without creating a new copy of the data.
* It can be faster than using `structuredClone()` for small updates, since it doesn't require cloning the entire data structure.

Cons:

* Immer requires more code to use correctly, as you need to create a "draft" version of the data and update it in place.
* If the update is large or deep within the data structure, Immer may still be slower than `structuredClone()` due to its in-place updating mechanism.

**Structured Clone:**

Pros:

* Structured clone creates a new copy of the data, which can be faster for large updates or deep nesting.
* It's often simpler to use than Immer, since you don't need to worry about creating a "draft" version of the data.

Cons:

* Structured clone requires more memory to store the cloned data structure.
* It may be slower than Immer for small updates, since it creates an entire new copy of the data.

**Library and Purpose**

* **Immer**: A library that provides a way to create immutable versions of arrays and objects. Its purpose is to help developers write predictable and efficient code by avoiding mutable state.
* **Lodash**: A utility library that provides a range of functions for working with arrays, objects, and other data structures. In this benchmark, Lodash is used to provide the `uuidv4()` function for generating unique IDs.
* **Uuid**: A library that generates universally unique identifiers (UUIDs) for use in programming.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntaxes being tested in this benchmark. The focus is on comparing two approaches to updating nested objects.

**Other Considerations**

When working with complex data structures, it's often important to consider the trade-offs between updating in place versus creating a new copy of the data. Immer can be a good choice when working with small updates or shallow nesting, while `structuredClone()` may be better suited for larger updates or deeper nesting.

In addition to these two approaches, there are other alternatives for updating nested objects, such as:

* **Object.assign()**: A method that creates a new object by copying an existing one.
* **JSON.parse() / JSON.stringify()**: Methods that convert JavaScript objects to and from JSON strings, which can be useful for serializing data or working with external data sources.

However, these alternatives may not provide the same level of performance or predictability as Immer or `structuredClone()`.

structuredClone vs Immer Produce (version: 0)

Comparing performance of: `immer.produce() vs structuredClone`

Created: 2 years ago by: Guest

Go to the latest result

immer.produce()

structuredClone

Historical Performance Data aggregated from 58 community runs

Desktop Results:

Chrome 50 runs

Firefox 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

structuredClone vs Immer Produce (version: 0)

Comparing performance of: immer.produce() vs structuredClone

Created: 2 years ago by: Guest

Go to the latest result

immer.produce()

structuredClone

Historical Performance Data aggregated from 58 community runs

Desktop Results:

Chrome 50 runs

Firefox 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `immer.produce() vs structuredClone`