Benchmark: Immer (setAutoFreeze(false)) vs Lodash cloneDeep 2

HTML Preparation code:

<script src="https://unpkg.com/immer@0.8.0/dist/immer.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>

Script Preparation code:

var { compose, over, set, lensPath, append } = R

var INITIAL_DATA = { items: {}, count: 0, keys: [] }

for (var index = 0; index < 50000; index++) {
  INITIAL_DATA[index] = { id: index, name: `ITEM-${index}`, value: Math.random() }
  INITIAL_DATA.count++
  INITIAL_DATA.keys.push(index)
}

var NEW_ITEM_ID = INITIAL_DATA.count +1

var produce = immer.default
immer.setAutoFreeze(false)

Tests:

immer
data = produce(INITIAL_DATA, draft => { draft.items[NEW_ITEM_ID] = { id: NEW_ITEM_ID, name: 'ITEM-NEW', value: 0 } draft.counter++ draft.keys.push(NEW_ITEM_ID) })
Lodash
data = _.cloneDeep(INITIAL_DATA); data.items[NEW_ITEM_ID] = { id: NEW_ITEM_ID, name: 'ITEM-NEW', value: 0 } data.counter++ data.keys.push(NEW_ITEM_ID)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
immer
Lodash

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Linux; Android 11; Mi 9T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.85 Mobile Safari/537.36

Browser/OS: Chrome Mobile 94 on Android

View result in a separate tab

Test name	Executions per second
immer	34.4 Ops/sec
Lodash	8.9 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll explain the benchmark in detail.

**Benchmark Overview**

The benchmark compares the performance of two approaches: Immer and Lodash, when it comes to cloning and modifying an object in JavaScript.

**Script Preparation Code**

The script preparation code provides the initial data (`INITIAL_DATA`) that will be used for both tests. The `immer` library is imported and configured to disable auto-freezing, which means that the draft objects will not be automatically frozen.

The script also defines a new item ID (`NEW_ITEM_ID`) and two functions: `produce` (from Immer) and a custom function that creates an initial data object with 50,000 items.

**Html Preparation Code**

The HTML preparation code includes links to external libraries: Immer, Ramda, and Lodash. These libraries are used in the script preparation code and will be used for both tests.

**Individual Test Cases**

There are two test cases:

1. **Immer**
```javascript
data = produce(INITIAL_DATA, draft => {
  draft.items[NEW_ITEM_ID] = { id: NEW_ITEM_ID, name: 'ITEM-NEW', value: 0 };
  draft.counter++;
  draft.keys.push(NEW_ITEM_ID);
});
```
This test case uses the `immer` library to clone and modify the initial data. The `produce` function creates a new immutable object by applying the provided update function (`draft => {...}`) to the original data.

2. **Lodash**
```javascript
data = _.cloneDeep(INITIAL_DATA);
  data.items[NEW_ITEM_ID] = { id: NEW_ITEM_ID, name: 'ITEM-NEW', value: 0 };
  data.counter++;
  data.keys.push(NEW_ITEM_ID);
```
This test case uses the `Lodash` library to clone and modify the initial data. The `cloneDeep` function creates a deep copy of the original data, which is then modified using the provided update code.

**Pros and Cons**

Here are some pros and cons of each approach:

* **Immer**
	+ Pros:
		- Immutable by design, ensuring thread-safety and predictability.
		- Optimized for performance and low memory usage.
	+ Cons:
		- Can be more complex to learn and use, especially for developers without prior experience with immutable data structures.
		- May require additional effort to manage the draft objects and avoid unnecessary copies.
* **Lodash**
	+ Pros:
		- Widely used and well-maintained library with a large community of users.
		- Provides a familiar API and easy-to-understand syntax.
	+ Cons:
		- Clones the original data, which can lead to increased memory usage.
		- May not be optimized for performance as much as Immer.

**Other Considerations**

When choosing between these two approaches, consider the following factors:

* **Thread-safety**: If you're working with concurrent code or need predictable behavior in multithreaded environments, Immer's immutable nature might be a better choice.
* **Performance**: If you prioritize performance and low memory usage, Immer's optimized implementation might be a better option.
* **Learning curve**: If you're new to JavaScript or haven't worked with immutable data structures before, Lodash might be a more accessible starting point.

**Alternatives**

Other alternatives for cloning and modifying objects in JavaScript include:

* **Spread operators (`{...}`)**: A concise way to create a shallow copy of an object.
* **`Object.assign()`**: Creates a shallow copy of an object by copying its enumerable properties.
* **`JSON.parse(JSON.stringify(obj))`**: Creates a deep copy of an object using the `JSON` protocol.

However, these alternatives might not offer the same level of performance or thread-safety as Immer or Lodash.

Related benchmarks:

Immer (setAutoFreeze(false)) vs Lodash cloneDeep 2 (version: 0)

Comparing performance of: immer vs Lodash

Created: 4 years ago by: Guest

Jump to the latest result

immer

Lodash

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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