Benchmark: Immer vs shallow copy vs Immutable

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>

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

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) })
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] }
Immutable
data = im.set('items', im.get('items').set(NEW_ITEM_ID, { id: NEW_ITEM_ID, name: 'ITEM-NEW', value: 0 }));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
immer
shallow copy
Immutable

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark.

**Benchmark Definition**

The benchmark tests three approaches to create a new item in an object: `shallow copy`, `Immutable`, and `Immer`. The benchmark creates an initial object `data` with 100 items, each containing an ID, name, and value. It then creates a new item with a unique ID and adds it to the `items` property of the original object using each of the three approaches.

**Approaches Compared**

1. **Shallow Copy**: This approach uses the spread operator (`...`) to create a shallow copy of the `data.items` array, and then pushes the new item onto the end of the array.
2. **Immutable**: This approach uses the `Immutable` library to create an immutable copy of the `data` object, and then sets the new item on the `items` property using the `set()` method.
3. **Immer**: This approach uses the `Immer` library to create a draft copy of the `data` object, and then mutates the draft by adding the new item.

**Pros and Cons**

1. **Shallow Copy**:
	* Pros: Fast, simple, and efficient.
	* Cons: May lead to unexpected side effects if not used carefully (e.g., modifying the original array).
2. **Immutable**:
	* Pros: Immutable data structure ensures thread safety and predictability.
	* Cons: May be slower than shallow copy due to the overhead of creating an immutable object.
3. **Immer**:
	* Pros: Provides a safe and predictable way to create new items while maintaining the immutability of the original object.
	* Cons: May require more memory due to the creation of a draft copy.

**Library Descriptions**

1. **Immutable**: Immutable.js is a popular library for working with immutable data structures in JavaScript. It provides a range of features, including immutable objects, arrays, and maps, as well as utility functions for manipulating these data structures.
2. **Immer**: Immer.js is another popular library for working with immutable data structures in JavaScript. It provides a simple and efficient way to create new items while maintaining the immutability of the original object.

**Special JS Features**

This benchmark does not use any special JavaScript features, such as async/await, Promises, or Web Workers.

**Other Alternatives**

If you want to explore alternative approaches, here are some options:

1. **Lodash**: Lodash provides a `cloneDeep()` function that can be used to create a deep copy of an object.
2. **JSON Patch**: JSON Patch is a library that allows you to create and apply patches to data structures in JSON format.
3. **Data Structures**: Depending on the specific requirements of your application, you may want to consider using other data structures, such as arrays or objects with inherent mutability.

Overall, this benchmark provides a useful comparison of three approaches to creating new items in an object, highlighting the pros and cons of each approach and the benefits of using immutable data structures.

Latest run results:

Run details: (Test run date: 4 years ago)

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

Browser/OS: Chrome 79 on Mac OS X 10.14.6

View result in a separate tab

Test name	Executions per second
immer	1145.2 Ops/sec
shallow copy	3073.5 Ops/sec
Immutable	822394.9 Ops/sec

Related benchmarks:

Immer vs shallow copy vs Immutable (version: 0)

Comparing performance of: immer vs shallow copy vs Immutable

Created: 5 years ago by: Guest

Jump to the latest result

immer

shallow copy

Immutable

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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