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

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: Object.assign(data.items, { [NEW_ITEM_ID]: { id: NEW_ITEM_ID, name: 'ITEM-NEW', value: 0 }, }), count: data.count + 1, keys: [...data.keys, NEW_ITEM_ID] })

Historical Performance Data aggregated from 19 community runs

Desktop Results:

Chrome 19 runs

Shallow copy

1K/s

Object.assign

65/s

immer

22/s

Immutable

9/s

Fastest: Shallow copy (161.7x faster)

View exact numbers

✓ Shallow copy: 1,454 ops/sec
• Object.assign: 65 ops/sec
• immer: 22 ops/sec
• Immutable: 9 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36

Browser/OS: Chrome 138 on Windows

View result in a separate tab

Shallow copy

2K/s

Object.assign

71/s

immer

23/s

Immutable

8/s

View exact numbers

Test name	Executions per second
✓ Shallow copy	2,056 Ops/sec
Object.assign	71 Ops/sec
immer	23 Ops/sec
Immutable	8 Ops/sec

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

LLMs can make mistakes. Check important info.

This is a JavaScript performance benchmarking test created using MeasureThat.net. The test aims to compare the performance of four different approaches for updating an object's properties.

**Benchmark Definition**

The benchmark definition defines a sample dataset `data` with 100,000 items, each containing an `id`, `name`, and `value`. The test also introduces a new item ID `NEW_ITEM_ID` that will be used to update the existing data.

**Options Compared**

The four options compared in this benchmark are:

1. **Immer**: A library for functional immutable object updates.
2. **Immutable**: A library for creating and manipulating immutable objects.
3. **Shallow copy**: Creating a shallow copy of the original object using the spread operator (`{...data}`).
4. **Object.assign**: Using the `Object.assign` method to update the object's properties.

**Pros and Cons**

1. **Immer**:
	* Pros: Fast updates, efficient for large datasets.
	* Cons: Requires a separate library, can be less intuitive for beginners.
2. **Immutable**:
	* Pros: Provides strong guarantees about data immutability, suitable for concurrent programming.
	* Cons: Can result in slower performance compared to Immer, more complex usage.
3. **Shallow copy**:
	* Pros: Simple and widely supported, can be useful for small datasets.
	* Cons: May lead to unnecessary memory allocations, not efficient for large datasets.
4. **Object.assign**:
	* Pros: Widely supported and understood, easy to use.
	* Cons: Can result in slower performance compared to Immer and Immutable, may overwrite existing data.

**Library Usage**

In the benchmark definition, two libraries are used:

1. **Immer**: The `immer.default` function is used to create a draft object that can be updated.
2. **Immutable**: The `Immutable.fromJS` function is used to create an immutable object from the original dataset.

**Special JS Feature/ Syntax**

This benchmark does not use any special JavaScript features or syntax beyond what's commonly available in modern browsers.

**Alternatives**

Other alternatives for updating objects include:

1. Using the spread operator (`{...data}`) with `Object.create` to create a new object.
2. Using `Array.prototype.slice()` and `Object.assign` to create a shallow copy of an array-like object.
3. Using a custom recursive function to update nested objects.

Keep in mind that these alternatives may have different performance characteristics and use cases compared to the options tested in this benchmark.

Immerjs vs Immutable vs Shallow copy vs Object.assign (performance test) (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

Historical Performance Data aggregated from 19 community runs

Desktop Results:

Chrome 19 runs

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

Historical Performance Data aggregated from 19 community runs

Desktop Results:

Chrome 19 runs

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`