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

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/immer/9.0.7/immer.umd.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/4.0.0/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, insert } = 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) draft.keys.splice(50, 0, 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] // keys: INITIAL_DATA.keys.slice(0, 50).concat(NEW_ITEM_ID).concat(INITIAL_DATA.keys.slice(50)) keys: [ ...INITIAL_DATA.keys.slice(0, 50), NEW_ITEM_ID, ...INITIAL_DATA.keys.slice(50)] }
ramda lens
data = compose( // over(lensPath(["keys"]), append(NEW_ITEM_ID)), over(lensPath(["keys"]), insert(50, 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
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)); state.update('keys', keys => keys.splice(50, 0, NEW_ITEM_ID)); })
immutable (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)); state.update('keys', keys => keys.splice(50, 0, NEW_ITEM_ID)); }) data.toJS()
mutation
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) mutable.keys.splice(50, 0, 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
immutable (toJS)
mutation

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 the benchmark and its various options.

**What is being tested?**

MeasureThat.net is testing the performance of different approaches for creating a shallow copy or modifying an existing object in JavaScript. The benchmark is comparing the speed of:

1. Shallow copying an object using the spread operator (`{...obj}`)
2. Using the `immer` library to create a new, immutable version of the object
3. Using the `ramda` library to create a new, immutable version of the object with `map` and `merge`
4. Modifying the original object directly (`mutable`)
5. Converting an immutable object to a mutable one using `toJS()` (specifically for `immutable`)

**Understanding the options**

1. **Shallow copying**: This approach creates a new object by spreading the properties of the original object into a new object. It's a simple and efficient way to create a copy, but it might not work well with complex objects or nested structures.
2. **Immer**: `immer` is a library that provides immutable data structures, allowing you to safely modify an existing object without causing unintended side effects. When creating a new version of the object, it creates a shallow copy of the original object and then modifies it in place.
3. **Ramda**: `ramda` is a functional programming library that includes various functions for manipulating objects, including `map` and `merge`. When used with `immer`, it creates a new, immutable version of the object by applying these functions to the original object.
4. **Mutation**: This approach modifies the original object directly, without creating a copy or using an intermediate data structure. While this can be efficient for small objects, it can lead to unintended side effects and make debugging more difficult when working with complex data structures.
5. **Immutable (toJS())**: This approach creates a new, mutable version of an immutable object by calling `toJS()`. This is likely done to compare the performance of converting an immutable object to a mutable one.

**Performance results**

The benchmark results show that:

* Shallow copying using the spread operator is the fastest
* Using `immer` is significantly slower than shallow copying but still faster than modifying the original object directly
* The `ramda` approach with `immer` is also slower than shallow copying, but slightly faster than modifying the original object directly
* Converting an immutable object to a mutable one using `toJS()` is the slowest option

**Conclusion**

The benchmark highlights the importance of understanding how different data structures and libraries affect performance in JavaScript. Shallow copying using the spread operator is generally the fastest approach, while using immutable libraries like `immer` and converting between immutable and mutable objects can be slower but provide benefits for thread safety and debugging. Modifying the original object directly should be avoided when possible to prevent unintended side effects.

Related benchmarks:

Immer (setAutoFreeze(false)) vs shallow vs ramda lens vs immutabe js vs immutable js (toJS) vs mutating 2.2.jlc (version: 2)

Comparing performance of: immer vs shallow copy vs ramda lens vs immutable vs immutable (toJS) vs mutation

Created: 4 years ago by: Registered User

Jump to the latest result

immer

shallow copy

ramda lens

immutable

immutable (toJS)

mutation

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