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

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

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

Browser/OS: Chrome 113 on Windows

View result in a separate tab

Test name	Executions per second
immer	32.5 Ops/sec
Immutable	14.2 Ops/sec
Shallow copy	73.3 Ops/sec
Object.assign	77.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of what's being tested on this provided JSON.

The benchmark is designed to compare the performance of four different approaches for creating a new object by modifying an existing one:

1. **Immer**: A library that provides a safe and efficient way to update objects by creating a "draft" version, which is then merged with the original object.
2. **Immutable**: A library that creates a new object by copying the properties of the original object and modifying the copy.
3. **Shallow copy**: Creating a new object by copying only the top-level properties of the original object, leaving the nested objects unchanged.
4. **Object.assign**: Using the `Object.assign` method to create a new object by merging the properties of the original object with an additional object.

**Pros and Cons:**

*   **Immer**: Provides a safe and efficient way to update objects, reducing the risk of side effects and improving performance. However, it may require more memory due to the creation of intermediate drafts.
*   **Immutable**: Creates a new object, ensuring immutability and thread-safety. However, it can be slower than other approaches, especially for large datasets.
*   **Shallow copy**: Fast and efficient, but may not be suitable for objects with nested properties or complex data structures. It also copies the original object's references, which can lead to unexpected behavior if the original object is modified simultaneously.
*   **Object.assign**: A simple and fast way to create a new object, but may not be thread-safe and can result in side effects.

**Library usage:**

*   The `Immer` library is used in the benchmark definition for its efficient and safe way of updating objects.
*   The `Immutable` library is used to demonstrate its performance compared to other approaches.

**Special JavaScript features:**

*   None mentioned, but it's worth noting that the use of `fromJS` and `default` methods from the Immer library requires knowledge of functional programming concepts in JavaScript.

**Other alternatives:**

*   **Lodash**: A popular utility library that provides various functions for manipulating objects, including merging and creating new ones. It might be an alternative to Object.assign.
*   **Proxy**: The Proxy object can be used to create a new object by defining getter and setter functions, which could potentially offer better performance than some of the other approaches listed here.

In summary, this benchmark compares the performance of four different approaches for creating a new object by modifying an existing one, with Immer providing a safe and efficient way to update objects, while Immutable creates a new object ensuring immutability.

Related benchmarks:

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

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

Created: one year ago by: Guest

Jump to the latest result

immer

Immutable

Shallow copy

Object.assign

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