Benchmark: Immer vs Clone Deep

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/immer/10.0.3/cjs/immer.cjs.production.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/lodash.clonedeep@4.5.0/index.min.js"></script>

Script Preparation code:

state =  {
    data: {
      data1: {
        data2: 'test'
      }
    }
  };

Tests:

Immer
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
CloneDeep

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 132 on Android

View result in a separate tab

CloneDeep

615K/s

Immer

0/s

View exact numbers

Test name	Executions per second
✓ CloneDeep	615,307 Ops/sec
Immer	0 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 provided benchmark and explain what's being tested, compared options, pros and cons, and other considerations.

**Benchmark Overview**

The benchmark compares two approaches for updating nested data objects in JavaScript:

1. **Immer**: A library for immutable data structures that provides a safe way to update data without mutating the original object.
2. **CloneDeep**: A function from Lodash that creates a deep copy of an object, allowing for modifications without affecting the original.

**Benchmark Setup**

The benchmark uses a simple JavaScript object `state` with nested properties, and two test cases:

1. **Immer**: Uses the `immer.produce` method to create a new draft of the state object, updates it, and returns the result.
2. **CloneDeep**: Creates a deep copy of the original `state` object using `_ = _.cloneDeep(state)`, then modifies the copy by updating one of its properties.

**Options Compared**

The two options are compared in terms of their performance, specifically:

* Execution speed (measured as executions per second)
* Raw UA string and browser information (not directly related to the benchmark results)

**Pros and Cons**

### Immer

Pros:

* Immutable data structures provide a safer way to update data without mutations.
* Optimized for performance and concurrency.

Cons:

* May require additional memory allocation for creating new draft objects.
* Can be slower due to the overhead of creating and managing immutable drafts.

### CloneDeep

Pros:

* Creates a deep copy of the original object, allowing modifications without affecting it.
* Simple and lightweight implementation.

Cons:

* Creates unnecessary copies of large data structures, potentially leading to performance issues.
* May not optimize well for concurrent execution or nested updates.

**Other Considerations**

* **Memory allocation**: Immer's immutable approach may require more memory allocation due to the creation of new draft objects. CloneDeep, on the other hand, creates a deep copy of the original object, which can lead to increased memory usage.
* **Concurrency**: Immer is optimized for concurrent execution, while CloneDeep may not perform well under heavy concurrency.
* **Nested updates**: CloneDeep may struggle with nested updates due to its deep copy approach.

**Library and Syntax Explanation**

* **Immer**: A JavaScript library that provides immutable data structures. It's used in the `immer.produce` method.
	+ Purpose: Provides a safe way to update data without mutating the original object.
	+ Syntax: `immer.produce(state, draft => { ... })`
* **Lodash CloneDeep**: A function from Lodash that creates a deep copy of an object. It's used in the `_.cloneDeep` method.
	+ Purpose: Creates a deep copy of an object, allowing modifications without affecting the original.

**Special JS Feature or Syntax**

None mentioned in this benchmark.

Immer vs Clone Deep (version: 0)

Comparing performance of: `Immer vs CloneDeep`

Created: 2 years ago by: Guest

Go to the latest result

Immer

CloneDeep

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Immer vs Clone Deep (version: 0)

Comparing performance of: Immer vs CloneDeep

Created: 2 years ago by: Guest

Go to the latest result

Immer

CloneDeep

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: `Immer vs CloneDeep`