Benchmark: Immerjs vs Immutable vs Shallow copy (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] }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
immer
Immutable
Shallow copy

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 127 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
immer	22.3 Ops/sec
Immutable	8.8 Ops/sec
Shallow copy	3545.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of different approaches to update and mutate data structures in JavaScript is crucial, especially when working with large datasets or complex applications.

**Benchmark Overview**

The provided benchmark tests three approaches to update and mutate a dataset:

1.  **Immer.js**: A library that provides a safe and efficient way to update immutable data structures.
2.  **Immutable.js**: A library that provides immutable data structures and operations on top of the JavaScript prototype chain.
3.  **Shallow Copy**: A manual approach where a new object is created by copying an existing one, which can lead to performance issues when working with large datasets.

**Approach 1: Immer.js**

Immer.js is used to update the data structure in a single pass, without creating temporary copies of the original data. It achieves this through its immutable-by-default approach, where every operation returns a new copy of the data, and modifies the draft object (which is not actually modified).

Pros:

*   **Efficient Updates**: Immer.js updates are efficient because it only needs to update the changes made to the original data structure.
*   **Immutable Data Structures**: Immer.js enforces immutable data structures by default, which can help prevent bugs and make code more predictable.

Cons:

*   **Learning Curve**: Immer.js requires a different mindset when working with data structures, as it's not like working directly with arrays or objects.
*   **Memory Usage**: While efficient updates are made,immer.js uses memory to store the new objects created during updates.

**Approach 2: Immutable.js**

Immutable.js is another library that provides immutable data structures and operations on top of the JavaScript prototype chain. It allows you to create immutable objects using `fromJS()` method and update them with methods like `set()` or `update()`.

Pros:

*   **Familiar API**: If you're already familiar with Immutable.js, its API might feel more comfortable to work with.
*   **Wide Adoption**: Immutable.js has a wide adoption base and is widely used in many projects.

Cons:

*   **Complexity**: The Immutable.js API can be complex, especially for beginners or those who haven't worked with immutable data structures before.
*   **Extra Memory Usage**: Like Immer.js, Immutable.js also uses memory to store the new objects created during updates.

**Approach 3: Shallow Copy**

The shallow copy approach involves creating a new object by copying an existing one. This can lead to performance issues when working with large datasets because it involves unnecessary copies of data.

Pros:

*   **Easy to Implement**: Creating a shallow copy is easy to implement, as you just need to use the spread operator (`{...}`) or `Object.assign()`.
*   **No Memory Overhead**: The shallow copy approach doesn't require any additional memory overhead because it's not working with immutable data structures.

Cons:

*   **Performance Issues**: Shallow copies can lead to performance issues when working with large datasets, as they involve unnecessary copies of data.
*   **Mutability**: Using a shallow copy makes the original object mutable, which can be error-prone and make debugging harder.

**Other Alternatives**

There are other libraries that provide similar functionality to Immer.js and Immutable.js, such as:

*   **Lodash**: A popular utility library that includes functions for working with immutable data structures.
*   **Simpleslice**: Another library that provides simple and efficient ways to update and mutate arrays.

In conclusion, each approach has its pros and cons. When choosing between them, consider factors like performance requirements, maintainability, and familiarity with the library's API.

Related benchmarks:

Immerjs vs Immutable vs Shallow copy (performance test) (version: 1)

Comparing performance of: immer vs Immutable vs Shallow copy

Created: 3 years ago by: Registered User

Jump to the latest result

immer

Immutable

Shallow copy

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