Benchmark: Immer produce() vs Lodash cloneDeep() vs AngularJS copy() vs JSON.parse()

HTML Preparation code:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<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:

_.cloneDeep()
const result = _.cloneDeep(state); result.data.data1.data2 = 'updated';
AngularJS copy
const result = angular.copy(state); result.data.data1.data2 = 'updated';
JSON.parse
const result = JSON.parse(JSON.stringify((state))); result.data.data1.data2 = 'updated';
immer.produce()
const result = immer.produce(state, draft => { draft.data.data1.data2 = 'updated' })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
_.cloneDeep()
AngularJS copy
JSON.parse
immer.produce()

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its options.

**Benchmark Overview**

The benchmark measures the performance of four different approaches for updating an immutable object: `immer.produce()`, `Lodash.cloneDeep()`, `AngularJS.copy()`, and `JSON.parse()`.

**Options Compared**

1. **Immer.produce()**: Immer is a library that provides a way to work with immutable data structures in JavaScript. The `produce()` function creates a new copy of the original object, allowing you to safely modify it without affecting the original.
2. **Lodash.cloneDeep()**: Lodash is a utility library that provides a wide range of functions for working with data in JavaScript. `cloneDeep()` creates a deep clone of an object, which can be used to create a new copy of an immutable object.
3. **AngularJS.copy()**: AngularJS is a JavaScript framework that provides a way to work with data-binding and dependency injection. The `copy()` function creates a shallow copy of an object, but it's not designed for working with immutable data structures like Immer.
4. **JSON.parse()**: JSON (JavaScript Object Notation) is a lightweight data interchange format that can be used to serialize and deserialize JavaScript objects. `JSON.parse()` can be used to create a new copy of an object by serializing the original object to a string, parsing it back into an object, and then cloning the resulting object.

**Pros and Cons**

* **Immer.produce()**: Pros:
	+ Designed specifically for working with immutable data structures.
	+ Provides a way to safely modify objects without affecting the original.
	Cons:
	+ May have performance overhead due to its creation of a new copy of the object.
* **Lodash.cloneDeep()**: Pros:
	+ Can be used to create a deep clone of an object, which can be useful for working with complex data structures.
	Cons:
	+ May not provide the same level of immutability as Immer.
	+ Can have performance overhead due to its creation of a new copy of the object.
* **AngularJS.copy()**: Pros:
	+ Lightweight and fast compared to other options.
Cons:
	+ Not designed for working with immutable data structures, which can lead to unintended side effects.
	+ May not provide the same level of immutability as Immer or Lodash.
* **JSON.parse()**: Pros:
	+ Can be used to create a new copy of an object by serializing and deserializing it.
Cons:
	+ May have performance overhead due to the serialization and deserialization process.
	+ Not designed specifically for working with immutable data structures.

**Other Considerations**

When choosing between these options, consider the specific requirements of your use case. If you need to work with complex, deeply nested data structures and want a high degree of immutability, Immer or Lodash might be better choices. However, if you're working with relatively simple data structures and need a lightweight solution, AngularJS.copy() might be sufficient.

Keep in mind that the performance results for this benchmark may vary depending on the specific input data and system configuration.

Latest run results:

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

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

Browser/OS: Chrome 118 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
_.cloneDeep()	38.0 Ops/sec
AngularJS copy	2.8 Ops/sec
JSON.parse	87.7 Ops/sec
immer.produce()	650972.2 Ops/sec

Related benchmarks:

Immer produce() vs Lodash cloneDeep() vs AngularJS copy() vs JSON.parse() (version: 0)

Objects immutability test

Comparing performance of: _.cloneDeep() vs AngularJS copy vs JSON.parse vs immer.produce()

Created: 9 months ago by: Guest

Jump to the latest result

_.cloneDeep()

AngularJS copy

JSON.parse

immer.produce()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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