Benchmark: Lodash CloneDeep vs Immer Produce with heavy load, slightly less useless

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 = 5;

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(() => document.createElement('div')),
    },
};

Tests:

immer.produce()
const result = immer.produce(state, draft => { draft.data.data1.data2 = 'updated' })
_.cloneDeep
const result = _.cloneDeep(state); result.data.data1.data2 = 'updated';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
immer.produce()
_.cloneDeep

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36

Browser/OS: Chrome 143 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
immer.produce()	459695.4 Ops/sec
_.cloneDeep	65.1 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark definition and explain what's being tested, compared options, pros and cons, library usage, and other considerations.

**Benchmark Definition:**

The benchmark measures the performance of two functions: `immer.produce` and `_.cloneDeep`. Both functions are used to create deep copies of complex data structures.

**What's being tested?**

* **immer.produce**: This function is part of the Immer library, which provides a safe and efficient way to mutate nested objects. The benchmark tests how fast it can produce a new, shallow copy of an object while updating specific properties.
* **_.cloneDeep**: This function is part of the Lodash library, which provides utility functions for functional programming. The benchmark tests how fast it can create a deep clone of an object.

**Comparison options:**

The benchmark compares two approaches:

1. **Immer's produce function**: Creates a shallow copy of the original object and then updates specific properties.
2. **Lodash's _.cloneDeep function**: Recursively creates a deep copy of the entire object, including nested objects.

**Pros and Cons:**

* **Immer's produce function**:
	+ Pros: Efficiently updates only the specified properties, reducing unnecessary copies.
	+ Cons: Creates a shallow copy of the original object, which may not be suitable for all use cases (e.g., when preserving nested structures).
* **Lodash's _.cloneDeep function**:
	+ Pros: Recursively creates a deep copy of the entire object, ensuring that all nested structures are preserved.
	+ Cons: Creates unnecessary copies of entire objects or arrays, potentially leading to performance issues.

**Library usage:**

The benchmark uses two libraries:

1. **Immer**: Provides the `immer.produce` function for creating shallow copies of objects while updating specific properties.
2. **Lodash**: Provides the `_cloneDeep` function for recursively creating deep copies of entire objects or arrays.

**Other considerations:**

* The benchmark uses a large, nested object with 500 siblings and 5 levels of depth to simulate real-world data structures.
* The `uuidv4` library is used to generate unique IDs for each object or array element.
* The `immer.umd.min.js` and `lodash.min.js` files are included in the benchmark setup code to ensure that both libraries are loaded correctly.

**Alternatives:**

If you need to create deep copies of objects while preserving nested structures, consider using:

1. **JSON.parse(JSON.stringify(obj))**: This method creates a deep copy of an object by serializing it to JSON and then parsing it back.
2. **Object.assign()**: This method can be used to create a shallow copy of an object, but may not work as expected with deeply nested objects.

Keep in mind that these alternatives may have performance implications or limitations, especially when dealing with large data structures.

Related benchmarks:

Lodash CloneDeep vs Immer Produce with heavy load, slightly less useless (version: 0)

Comparing performance of: immer.produce() vs _.cloneDeep

Created: 3 years ago by: Guest

Jump to the latest result

immer.produce()

_.cloneDeep

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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