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>

AخA
 
<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);

​x
 
//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)
})

 
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]
}

 
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));

 
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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
immer
shallow copy
Immutable

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 5 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 6 months ago):

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

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.
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] = { ... }.
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

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.
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.
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

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.
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.

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