Benchmark: Immer vs Shallow copy vs Immutable Perf Test

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

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

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

Browser/OS: Chrome 138 on Windows

View result in a separate tab

Test name	Executions per second
immer	0.0 Ops/sec
shallow copy	8059.6 Ops/sec
Immutable	77.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of different approaches to create and update objects in JavaScript can be a fascinating benchmark. Let's break down what is tested on the provided JSON:

The test creates an object `data` with 100 properties, each representing an item with an ID, name, and value. The goal is to add a new item to the `items` array without modifying the original object.

Three approaches are compared:

1. **Immer**: Immer is a library that provides a safe way to work with immutable data structures. In this test, `immer.default` is used to create a draft of the `data` object and then update it with a new item.
	* Pros:
		+ Ensures immutability of the original object, which can be beneficial for concurrent programming or when working with shared data.
		+ Reduces side effects by creating a new object instead of modifying an existing one.
	* Cons:
		+ Can be slower than other approaches due to the overhead of creating and managing draft objects.
2. **Shallow Copy**: This approach creates a shallow copy of the `data` object using the spread operator (`{ ...data, ... }`) and then updates it with the new item.
	* Pros:
		+ Faster than Immer since it doesn't involve creating draft objects or managing immutability.
		+ More lightweight compared to Immer.
	* Cons:
		+ Modifies the original object, which can lead to unexpected behavior if other parts of the code rely on its immutability.
3. **Immutable**: This approach uses Immutable.js to create a new immutable object from the `data` object and then updates it with the new item using methods like `set()`.
	* Pros:
		+ Ensures immutability, similar to Immer.
		+ Can be more efficient than Shallow Copy since Immutable.js optimizes memory allocation and garbage collection.
	* Cons:
		+ Requires additional dependencies (Immutable.js) and can add overhead due to the need for explicit object creation.

The test case uses `new Date()` instead of a special JS feature or syntax, which is a common practice in benchmarking to ensure consistent results across different browsers and environments.

The latest benchmark result shows that Shallow Copy outperforms both Immer and Immutable.js, likely due to its lightweight nature and lack of overhead. However, the actual performance difference may vary depending on the specific use case and requirements.

Other alternatives to consider:

* **Object.assign()**: This method creates a new object by copying an existing one and then updates it with the new item.
	+ Pros: Simple and efficient, but may not be as lightweight as Shallow Copy or Immutable.js.
	+ Cons: Modifies the original object if not used carefully.
* **Proto-based approach**: Some developers might use prototype chains to create a new object by extending an existing one. However, this approach can lead to unexpected behavior and is generally discouraged in favor of more explicit and predictable methods like Immer or Immutable.js.

Keep in mind that the choice of approach ultimately depends on your specific requirements, such as performance, readability, and maintainability.

Related benchmarks:

Immer vs Shallow copy vs Immutable Perf Test (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

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