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

Latest run results:

Run details: (Test run date: 2 years 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

immer.produce()

651K/s

JSON.parse

88/s

_.cloneDeep()

38/s

AngularJS copy

3/s

View exact numbers

Test name	Executions per second
✓ immer.produce()	650,972 Ops/sec
JSON.parse	88 Ops/sec
_.cloneDeep()	38 Ops/sec
AngularJS copy	3 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 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.

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: 2 years ago by: Guest

Go to the latest result

_.cloneDeep()

AngularJS copy

JSON.parse

immer.produce()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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: 2 years ago by: Guest

Go to the latest result

_.cloneDeep()

AngularJS copy

JSON.parse

immer.produce()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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