Benchmark: Immerjs vs Immutable vs Shallow copy vs Object.assign (performance test) 3

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/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 < 100000; 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) })
Immutable
var im = Immutable.fromJS(data); im = im.set('items', im.get('items').set(NEW_ITEM_ID, { id: NEW_ITEM_ID, name: 'ITEM-NEW', value: 0 })); im = im.set('count', im.count +1); im = im.set('keys', im.get('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] }
Object.assign
data = Object.assign({}, 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] })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
immer
Immutable
Shallow copy
Object.assign

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 11 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36 Edg/139.0.0.0

Browser/OS: Chrome 139 on Mac OS X 10.15.7

View result in a separate tab

Shallow copy

5K/s

Object.assign

120/s

immer

39/s

Immutable

16/s

View exact numbers

Test name	Executions per second
✓ Shallow copy	5,444 Ops/sec
Object.assign	120 Ops/sec
immer	39 Ops/sec
Immutable	16 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what is being tested.

**Benchmark Definition**

The benchmark is testing four different approaches to add a new item to an object: Immutable.js, Immer.js, Shallow copy using JavaScript's spread operator, and Object.assign(). The goal is to measure which approach performs best in terms of performance.

**Options Compared**

1. **Immutable.js**: This library provides a way to work with immutable data structures, ensuring that the state of the application never changes unexpectedly.
2. **Immer.js**: This library provides a way to work with mutable data structures while maintaining a predictable and easy-to-debug workflow.
3. **Shallow copy using JavaScript's spread operator** (`...`): This approach creates a new object by copying all enumerable properties from an existing object, without creating a deep copy of nested objects.
4. **Object.assign()**: This method copies all enumerable own properties from one or more source objects to a target object.

**Pros and Cons**

1. **Immutable.js**:
	* Pros: Ensures predictable and immutable state, can reduce bugs related to state changes.
	* Cons: Can be slower due to the overhead of creating new objects and updating references.
2. **Immer.js**:
	* Pros: Provides a predictable and easy-to-debug workflow, can improve performance by avoiding unnecessary object creation.
	* Cons: Requires more memory than traditional mutation, as it creates drafts that are updated when the original object is modified.
3. **Shallow copy using JavaScript's spread operator**:
	* Pros: Fast and efficient way to create a new object without deep copying nested objects.
	* Cons: Does not update existing objects, may lead to unexpected behavior if not used carefully.
4. **Object.assign()**:
	* Pros: Fast and easy to use, works well with shallow copies.
	* Cons: Can be slower than the spread operator for large objects, may lead to unexpected behavior if not used carefully.

**Library and Purpose**

1. **Immutable.js**: Provides a way to work with immutable data structures, ensuring that the state of the application never changes unexpectedly.
2. **Immer.js**: Provides a way to work with mutable data structures while maintaining a predictable and easy-to-debug workflow.

**Special JS Features or Syntax**

The benchmark uses several JavaScript features:

* `let` and `const` declarations for variable scope
* Arrow functions (`() => { ... }`)
* Destructuring assignment (`...data.items`)
* Spread operator (`...`)

These features are commonly used in modern JavaScript development, but may not be familiar to all developers.

**Alternatives**

If you're interested in exploring alternative approaches to these libraries, here are a few options:

1. **Lodash**: A utility library that provides various functions for working with objects and arrays.
2. **Ramda**: A functional programming library that provides a way to work with immutable data structures.
3. **Mongolian Merkle Trees**: An alternative approach to storing and updating large datasets in a predictable and efficient manner.

Keep in mind that each of these alternatives has its own strengths and weaknesses, and may not be suitable for every use case.

Immerjs vs Immutable vs Shallow copy vs Object.assign (performance test) 3 (version: 0)

Comparing performance of: `immer vs Immutable vs Shallow copy vs Object.assign`

Created: 3 years ago by: Guest

Go to the latest result

immer

Immutable

Shallow copy

Object.assign

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Immerjs vs Immutable vs Shallow copy vs Object.assign (performance test) 3 (version: 0)

Comparing performance of: immer vs Immutable vs Shallow copy vs Object.assign

Created: 3 years ago by: Guest

Go to the latest result

immer

Immutable

Shallow copy

Object.assign

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 Immutable vs Shallow copy vs Object.assign`