Benchmark: structuredClone vs Immer Produce simple

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)
structuredClone
const result = structuredClone(state);

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_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
immer.produce()	6504997.0 Ops/sec
structuredClone	240.5 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):

LLMs can make mistakes. Check important info.

The benchmark defined in the JSON compares two different approaches to creating deep copies of a complex JavaScript object: using the **Immer** library's `produce` function and the built-in **structuredClone** feature.

### Options Compared:

1. **Immer's `produce` Function**:
    - **Benchmark Definition**: `const result = immer.produce(state, draft => draft);`
    - **Description**: Immer operates by using the concept of immutable state updates. It allows developers to work with "draft" states and apply changes in a mutable-like fashion, which it then produces a new state from.
    - **Pros**:
        - Simplicity: Offers a straightforward API for handling immutable updates.
        - Increased readability: Allows direct manipulation of the draft state, making the code easier to read and maintain.
        - History Tracking: Can retain a history of state changes for undo functionalities.
    - **Cons**:
        - Performance: While Immer is optimized, it may still be slower compared to native cloning methods for very large objects or frequent updates.
        - Additional dependency: Requires including and managing an external library.

2. **Structured Clone**:
    - **Benchmark Definition**: `const result = structuredClone(state);`
    - **Description**: The `structuredClone` function provides a native way to create deep copies of JavaScript objects, including handling of various types like Date, Map, Set, and more.
    - **Pros**:
        - Native implementation: No dependencies, as it’s built into the JavaScript language.
        - Performance: For creating deep copies, `structuredClone` has been observed to be faster in certain scenarios compared to libraries due to optimizations in JavaScript engines.
        - Support for complex types: Can clone a wider range of JavaScript data structures.
    - **Cons**:
        - Complexity in usage: If one needs to alter the structure, they must manually manage it, which can lead to verbose and less intuitive code compared to Immer.
        - Browser compatibility: May not work in older JavaScript environments, though broadly supported in modern browsers.

### Libraries and Features:
- **Immer**: A library for managing immutable state in JavaScript applications. It makes handling of immutable updates easier through its simple and intuitive API, suitable for environments like React where immutability is often crucial.
- **`structuredClone`**: A built-in JavaScript function to create a deep copy of objects. It is part of the ECMAScript specification, providing developers with a powerful way to handle complex data structures without needing external libraries.

### Performance Results:
The benchmark results indicate that **Immer's `produce` function** can handle around **2.27 million executions per second**, whereas **structuredClone** achieves approximately **140 executions per second**. This indicates that, at least in this specific case and context, Immer is significantly faster than structuredClone, which may seem counterintuitive given the typical expectations of built-in functions.

### Alternatives:
- **Lodash**: Another utility library that offers deep cloning capability through `_.cloneDeep()`. It provides flexibility and various other utility functions but can have similar downsides to Immer in terms of additional dependency and performance overhead compared to native functions.
- **Manual Deep Copy**: Implementing a custom deep copy function. This offers the utmost control but can lead to complex code and potential issues with special types (like Dates, Maps, etc.) if not handled correctly.
- **JSON Serialization (`JSON.stringify()` and `JSON.parse()`)**: A commonly used method for cloning objects. However, it has limitations with non-serializable types like functions, undefined, or Infinity, making it less robust than structuredClone or the Immer approach.

### Conclusion:
This benchmark provides insights into the performance and usability trade-offs between using an external library like Immer and utilizing native JavaScript features for deep cloning. The choice between these approaches will depend on specific project needs, such as the complexity of state management, performance requirements, and overall code maintainability.

Related benchmarks:

structuredClone vs Immer Produce simple (version: 0)

Comparing performance of: immer.produce() vs structuredClone

Created: 2 months ago by: Guest

Jump to the latest result

immer.produce()

structuredClone

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):