Benchmark: Immer vs Shallow copy vs Immutable Perf Test updated

HTML Preparation code:

<script src="https://unpkg.com/immer/dist/immer.umd.production.min.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: 2 years ago)

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

Browser/OS: Chrome 97 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
immer	1518.5 Ops/sec
shallow copy	8468.1 Ops/sec
Immutable	40.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares the performance of three approaches to update an object in JavaScript:

1. **Immer**: A library for functional updates on objects, similar to Immutable.js.
2. **Shallow Copy**: Creating a new shallow copy of the original object and updating it with new values.
3. **Immutable**: Using Immutable.js to create a new immutable object with updated values.

**Options Compared**

The benchmark compares the execution time of each approach for updating the `data` object with a new item, including creating a new item, incrementing the count, and adding the new item's key to the keys array.

**Pros and Cons of Each Approach**

1. **Immer**: Pros:
	* Efficient updates without re-creating the entire object.
	* Easy to use with its `produce` function.
2. **Shallow Copy**: Pros:
	* Simple to implement, no additional dependencies required.
	* Fast creation of a new shallow copy.
3. **Immutable**: Pros:
	* Ensures data immutability, which can be beneficial for complex applications.
	* Can be more predictable and easier to reason about.

Cons:

1. **Immer**:
	* May have overhead due to its functional update approach.
	* Less predictable than Immutable.js for complex updates.
2. **Shallow Copy**:
	* Does not ensure data immutability, which can lead to unexpected behavior.
	* Can be slower if the object is large and needs to be entirely recreated.
3. **Immutable**: Pros:
	* Guarantees data immutability, ensuring predictable behavior.
	* Often used in functional programming, making it easier for developers familiar with this paradigm.

**Library Descriptions**

1. **Immer**: A library that provides a simple way to update objects without re-creating the entire object. It achieves this by using draft updates and then applying them to the original object.
2. **Immutable.js**: A library that enables you to work with immutable data structures, making your code more predictable and easier to reason about.

**Special JS Features**

The benchmark does not explicitly use any special JavaScript features or syntax beyond standard ES6+ features.

**Alternatives**

Some alternative approaches to updating objects in JavaScript could include:

1. **Object.assign()**: A method that updates an existing object with new properties, but may be slower for large objects.
2. **Lodash's `assignIn()` function**: A utility function from the Lodash library that provides a safe and efficient way to update objects.
3. **Prototype chain updates**: Directly modifying the prototype chain of an object can be faster than using a library or other approaches, but it may lead to unexpected behavior if not used carefully.

Keep in mind that this is just a brief overview, and there are many nuances depending on your specific use case and requirements.

Related benchmarks:

Immer vs Shallow copy vs Immutable Perf Test updated (version: 0)

Comparing performance of: immer vs shallow copy vs Immutable

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