Benchmark: Immer (setAutoFreeze(false)) vs shallow vs ramda lens vs immutabe js vs immutable js (toJS) vs mutating 2.0

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/immer/8.0.1/immer.umd.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script>

Script Preparation code:

var { compose, over, set, lensPath, append } = R

var INITIAL_DATA = { items: {}, count: 0, keys: [] }

for (var index = 0; index < 100; index++) {
  INITIAL_DATA[index] = { id: index, name: `ITEM-${index}`, value: Math.random() }
  INITIAL_DATA.count++
  INITIAL_DATA.keys.push(index)
}

var mutable = INITIAL_DATA

var NEW_ITEM_ID = INITIAL_DATA.count +1

var produce = immer.default

var immutable = Immutable.fromJS(INITIAL_DATA)

Tests:

immer
data = produce(INITIAL_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 = { ...INITIAL_DATA, items: { ...INITIAL_DATA.items, [NEW_ITEM_ID]: { id: NEW_ITEM_ID, name: 'ITEM-NEW', value: 0 } }, count: INITIAL_DATA.count +1, keys: [ ...INITIAL_DATA.keys, NEW_ITEM_ID] }
ramda lens
data = compose( over(lensPath(["keys"]), append(NEW_ITEM_ID)), over(lensPath(["count"]), x => x + 1), set(lensPath(["items", NEW_ITEM_ID]), { id: NEW_ITEM_ID, name: "ITEM-NEW", value: 0 }) )(INITIAL_DATA);
Immutable js test
data = immutable.withMutations((state) => { state.update('items', items => items.set(NEW_ITEM_ID, { id: NEW_ITEM_ID, name: "ITEM-NEW", value: 0 })); state.set('count', INITIAL_DATA + 1); state.update('keys', keys => keys.push(NEW_ITEM_ID)); })
immutable js (toJS)
data = immutable.withMutations((state) => { state.update('items', items => items.set(NEW_ITEM_ID, { id: NEW_ITEM_ID, name: "ITEM-NEW", value: 0 })); state.set('count', INITIAL_DATA + 1); state.update('keys', keys => keys.push(NEW_ITEM_ID)); }) data.toJS()
mutate
mutable.items[NEW_ITEM_ID] = { id: NEW_ITEM_ID, name: 'ITEM-NEW', value: 0 } mutable.count = INITIAL_DATA.count +1 mutable.keys.push(NEW_ITEM_ID)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
immer
shallow copy
ramda lens
Immutable js test
immutable js (toJS)
mutate

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Android 14; Mobile; rv:132.0) Gecko/132.0 Firefox/132.0

Browser/OS: Firefox Mobile 132 on Android

View result in a separate tab

Test name	Executions per second
immer	15850.5 Ops/sec
shallow copy	216691.0 Ops/sec
ramda lens	65080.6 Ops/sec
Immutable js test	468580.7 Ops/sec
immutable js (toJS)	16128.8 Ops/sec
mutate	20774238.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

The provided JSON represents a benchmark test case on MeasureThat.net, comparing the performance of different approaches to update and manipulate an object in JavaScript.

**Approaches compared**

1. **Immer**: A library that provides a functional programming style for updating objects, making it easier to reason about state changes.
2. **Shallow copy**: Creating a new object by copying existing properties, without modifying the original object.
3. **Ramda Lens**: A library that provides a higher-order function approach to update and manipulate nested objects.
4. **Immutable.js (toJS)**: Using the `toJS()` method to convert an immutable object to a plain JavaScript object for updates.
5. **Mutate**: Directly modifying the original object using dot notation or bracket notation.

**Pros and Cons**

1. **Immer**:
	* Pros: Easy to use, concise code, predictable behavior.
	* Cons: Can be slower due to the extra overhead of creating a new draft object.
2. **Shallow copy**:
	* Pros: Fastest approach, as it only creates a new object without modifying the original.
	* Cons: May not work well with nested objects or complex data structures.
3. **Ramda Lens**:
	* Pros: Flexible and powerful, allows for deep object updates.
	* Cons: Can be slower due to the extra overhead of creating higher-order functions.
4. **Immutable.js (toJS)**:
	* Pros: Provides a predictable and thread-safe way to update immutable objects.
	* Cons: May incur additional overhead due to the conversion process.
5. **Mutate**:
	* Pros: Fastest approach, as it directly modifies the original object.
	* Cons: Can lead to unexpected behavior if not used carefully, as it affects the original data.

**Benchmark Results**

The latest benchmark results show that:

1. **Mutate** is the fastest approach, with an average of 3.11 executions per second.
2. **Shallow copy** is close behind, with an average of 2.15 executions per second.
3. **Immutable.js (toJS)** and **Immer** are relatively slower, with averages around 1.22 and 1.03 executions per second, respectively.
4. **Ramda Lens** is the slowest approach, with an average of 0.45 executions per second.

In conclusion, while Mutate and Shallow copy are fast approaches, they may not be suitable for all use cases due to their direct modification of the original object or lack of predictability. Immmer, Ramda Lens, and Immutable.js (toJS) offer more flexibility and power but at a slightly higher cost in terms of performance.

Related benchmarks:

Immer (setAutoFreeze(false)) vs shallow vs ramda lens vs immutabe js vs immutable js (toJS) vs mutating 2.0 (version: 0)

Comparing performance of: immer vs shallow copy vs ramda lens vs Immutable js test vs immutable js (toJS) vs mutate

Created: 3 years ago by: Guest

Jump to the latest result

immer

shallow copy

ramda lens

Immutable js test

immutable js (toJS)

mutate

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