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() }; }

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: 4 days ago)

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

Browser/OS: Firefox 151 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
immer.produce()	686369.6 Ops/sec
structuredClone	371.8 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()`.

Related benchmarks:

structuredClone vs Immer Produce (version: 0)

Comparing performance of: immer.produce() vs structuredClone

Created: 2 years ago by: Guest

Jump to the latest result

immer.produce()

structuredClone

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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