Benchmark: structuredClone vs Immer

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
produce
structuredClone

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

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

Browser/OS: Chrome 129 on Windows

View result in a separate tab

Test name	Executions per second
produce	359664.6 Ops/sec
structuredClone	141.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of two different approaches for deep cloning and updating objects in JavaScript, `structuredClone` and `immer`. Let's break down what's being tested and compare the options.

**Benchmarked libraries:**

1. **Immer**: A library for immutable data structures. It provides a way to update existing objects without changing their original structure. Immer uses a concept called "drafts" to create temporary copies of objects during updates.
2. **structuredClone**: A built-in JavaScript function that performs deep cloning of objects, including arrays and objects.

**Benchmarked scenarios:**

The test cases consist of two benchmarks:

1. `produce`: This benchmark uses the `immer` library to update an object by creating a new draft and updating its properties. The script creates a deep clone of an object using `produce`, updates it, and then creates 500 new objects with unique IDs.
2. `structuredClone`: This benchmark uses the `structuredClone` function to perform a deep copy of an object, updates it, and then creates 500 new objects with unique IDs.

**Comparison:**

Both approaches achieve similar results, but they differ in their implementation:

1. **Immer (produce)**:
	* Pros:
		+ More efficient than `structuredClone` for large objects due to its mutable draft approach.
		+ Supports more advanced update scenarios and debugging features.
	* Cons:
		+ Requires an additional library import (`immer`).
		+ May have slower startup times due to the need to initialize the `produce` function.
2. **structuredClone**:
	* Pros:
		+ Built-in JavaScript function, no additional library required.
		+ Fast and efficient implementation for deep cloning.
	* Cons:
		+ Not optimized for large objects or complex updates.
		+ Does not provide debugging features like Immer.

**Other considerations:**

1. **Immutable data structures**: If you're working with immutable data structures, `immer` is likely a better choice due to its built-in support for immutable updates.
2. **Large datasets**: For very large objects or complex update scenarios, `structuredClone` might be more suitable due to its optimized implementation and faster execution times.

**Alternatives:**

1. **JSON.parse(JSON.stringify(obj))**: This approach uses the `JSON` object to create a deep clone of an object. However, it has limitations, such as:
	* Not supporting complex data types (e.g., functions, dates).
	* Potential performance issues with large objects.
2. **lodash.cloneDeep**: Another popular library for cloning objects and arrays. While it's more efficient than `JSON.parse(JSON.stringify(obj))`, it requires an additional import.

In conclusion, the choice between `structuredClone` and `immer` (or other libraries) depends on your specific use case, performance requirements, and personal preference. If you need to clone and update large objects with complex data structures, consider using a library like Immer or exploring alternative approaches like `JSON.parse(JSON.stringify(obj))`.

Related benchmarks:

structuredClone vs Immer (version: 0)

Comparing performance of: produce vs structuredClone

Created: 4 months ago by: Registered User

Jump to the latest result

produce

structuredClone

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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