Benchmark: Immer vs Shallow copy vs Immutable Perf Test 3

HTML Preparation code:

<script src="https://unpkg.com/immer/dist/immer.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.js"></script>

Script Preparation code:

//const { fromJS } = require('immutable');
var data = { items: {}, count: 0, keys: [] }

for (let index = 0; index < 100; index++) {
  data[index] = { id: index, name: `ITEM-${index}`, value: Math.random() }
  data.count++
  data.keys.push(index)
}

var NEW_ITEM_ID = data.count +1

var produce = immer.default

var im = Immutable.fromJS(data);

Tests:

immer
data = produce(data, draft => { draft.items[NEW_ITEM_ID] = { id: NEW_ITEM_ID, name: 'ITEM-NEW', value: 0 } draft.counter++ draft.keys.push(NEW_ITEM_ID) })
shallow copy
data = { ...data, items: { ...data.items, [NEW_ITEM_ID]: { id: NEW_ITEM_ID, name: 'ITEM-NEW', value: 0 } }, count: data.count +1, keys: [ ...data.keys, NEW_ITEM_ID] }
Immutable
var um = im.set('items', im.get('items').set(NEW_ITEM_ID, { id: NEW_ITEM_ID, name: 'ITEM-NEW', value: 0 })); um = um.set('count', um.count +1); um = um.set('keys', um.get('keys').push(NEW_ITEM_ID));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
immer
shallow copy
Immutable

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_2) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.4 Safari/605.1.15

Browser/OS: Safari 13 on Mac OS X 10.15.2

View result in a separate tab

Test name	Executions per second
immer	747.8 Ops/sec
shallow copy	7290.8 Ops/sec
Immutable	345725.4 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll provide an explanation of the benchmark, its options, pros and cons, and other considerations.

**Benchmark Overview**

The benchmark measures the performance of three approaches to creating a new item in an object: Immutable.js (also known as "Immer"), shallow copy using the spread operator (`...`), and mutable assignment (`var um = im.set()`).

**Options Compared**

1. **Immutable.js (Immer)**: This approach creates a new, immutable copy of the original data structure. When creating a new item, it uses the `immer.default` function to create a draft object and then updates it with the new values.
2. **Shallow Copy using Spread Operator (`...`)**: This approach creates a shallow copy of the original data structure by spreading its properties into a new object. When creating a new item, it adds the new property to the existing object using the syntax `data.items[NEW_ITEM_ID] = { ... }`.
3. **Mutable Assignment (`var um = im.set()`)**: This approach creates a mutable copy of the original data structure by updating an existing object directly.

**Pros and Cons**

1. **Immutable.js (Immer)**:
	* Pros: Immutable copies ensure that data is never changed in place, making it easier to reason about code behavior and debug issues.
	* Cons: Creating a new copy can be expensive in terms of performance, especially for large datasets.
2. **Shallow Copy using Spread Operator (`...`)**:
	* Pros: Creates a shallow copy with minimal overhead, making it suitable for small to medium-sized datasets.
	* Cons: Shallow copying only creates a new object reference; the underlying data is still shared between the original and copied objects.
3. **Mutable Assignment (`var um = im.set()`)**:
	* Pros: Fastest approach, as no copies are created.
	* Cons: Updates the original object in place, which can lead to unpredictable behavior if not handled carefully.

**Other Considerations**

* When working with large datasets or complex data structures, immutable approaches like Immutable.js (Immer) may be more suitable for performance and code maintainability reasons.
* For small datasets or simple use cases, shallow copy using the spread operator (`...`) might be a good trade-off between performance and ease of implementation.
* Mutable assignment (`var um = im.set()`) is generally not recommended due to its potential side effects and lack of predictability.

**Libraries Used**

1. **Immutable.js**: A JavaScript library for creating immutable data structures. It provides functions like `immer.default`, which creates a draft object, and `set`/`get` methods for updating and accessing objects.
2. **Spread Operator (`...`)**: A built-in JavaScript operator that creates a shallow copy of an object.

**Special JS Features or Syntax**

This benchmark does not explicitly use any special JavaScript features or syntax, such as async/await, Promises, or Web Workers. However, the benchmark uses the `for` loop to create the initial data structure, which might be optimized for older browsers using techniques like memoization or caching.

Please note that this explanation provides a general overview of the benchmark and its options. Depending on specific use cases and requirements, different approaches might be more suitable.

Related benchmarks:

Immer vs Shallow copy vs Immutable Perf Test 3 (version: 0)

Comparing performance of: immer vs shallow copy vs Immutable

Created: 5 years ago by: Guest

Jump to the latest result

immer

shallow copy

Immutable

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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