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

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

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months 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.

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 2 months ago):