Benchmark: Immer vs shallow copy + immutable (2)

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.min.js"></script>

Script Preparation code:

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 datai = { items: Immutable.Map(data.items), count: data.count, keys: Immutable.List(data.keys) }

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
datai = { ...datai, items: datai.items.set(NEW_ITEM_ID, { id: NEW_ITEM_ID, name: 'ITEM-NEW', value: 0 }), count: datai.count + 1, keys: datai.keys.push(NEW_ITEM_ID) }

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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

**Benchmark Purpose:**
The goal of this benchmark is to compare the performance of three approaches for creating immutable data structures in JavaScript:

1. Immer (using `immer.default`)
2. Shallow copy with immutable updates
3. Immutable data structure using Immutable.js

**Options Compared:**

* **Immer:** Uses the Immer library to create an immutable version of the original data object.
	+ Pros:
		- Easy to use and integrate into existing codebases.
		- Can be used to create complex, nested immutable data structures.
	+ Cons:
		- May have performance overhead due to the creation of a new immutable object.
* **Shallow Copy with Immutable Updates:** Creates a shallow copy of the original data object and then updates it immutably by modifying the copied object directly.
	+ Pros:
		- Can be faster than Immer since only a single copy is created.
		- Allows for more flexibility in updating individual elements without affecting the entire dataset.
	+ Cons:
		- May not work well with complex, nested data structures.
* **Immutable Data Structure using Immutable.js:** Creates an immutable data structure using the Immutable.js library, which provides a robust and efficient way to create and manipulate immutable objects.
	+ Pros:
		- Provides a more comprehensive and feature-rich immutable data structure API than Immer.
		- Can be used to create complex, nested immutable data structures with ease.
	+ Cons:
		- May require additional setup and configuration compared to Immer.

**Library Usage:**
The benchmark uses two libraries:

* **Immer:** A small library that provides a simple way to create immutable versions of objects. It is designed for use cases where the focus is on simplicity and ease of use.
* **Immutable.js:** A more comprehensive library that provides an extensive set of features for creating and manipulating immutable data structures. It is designed for use cases where the focus is on performance, scalability, and flexibility.

**Special JS Feature or Syntax:**
The benchmark uses a JavaScript feature called "arrow functions" (e.g., `draft => { ... }`) which was introduced in ECMAScript 2015. This feature allows for concise and expressive code that can improve readability and maintainability.

**Other Considerations:**

* **Performance:** The benchmark measures the number of executions per second, which is a common metric for evaluating performance.
* **Browser Support:** The benchmark runs on Firefox 66, which may not be the most up-to-date browser. However, this should provide a reasonable estimate of performance across modern browsers.

**Alternative Approaches:**

* **Lodash's Immutable.js equivalent:** Lodash provides an `immutable` function that can create immutable versions of objects, similar to Immer.
* **Pure functions with callbacks:** Another approach would be to use pure functions (functions that always return the same output given the same inputs) and update individual elements by passing callbacks or promises to modify the data structure.
* **Properly using `Object.assign` and `Array.prototype.slice`:** Some developers might argue that creating shallow copies of objects using `Object.assign` and updating them with immutable updates can be faster than Immer. However, this approach requires careful consideration of performance and memory usage.

Overall, the benchmark provides a useful comparison of three approaches for creating immutable data structures in JavaScript, highlighting their strengths and weaknesses.

Related benchmarks:

Immer vs shallow copy + immutable (2) (version: 0)

Comparing performance of: immer vs shallow copy vs immutable

Created: 6 years ago by: Guest

Jump to the latest result

immer

shallow copy

immutable

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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