Benchmark: object spread vs immutable-js set vs immer 2

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/immutability-helper@2.7.0/index.min.js"></script>
<script src="https://unpkg.com/immer@6.0.3/dist/immer.umd.production.min.js"></script>

Tests:

object spread
let obj = {}; for(i=0;i<1000;i++){ const key = 'key'+i const value = 'value'+i obj = {...obj, [key]: {key, value}} }
immutable-js
let obj = Immutable.Map(); for(i=0;i<1000;i++){ const key = 'key'+i const value = 'value'+i obj = obj.set(key, {key, value}) }
immer
let obj = {}; for(i=0;i<1000;i++){ obj = immer.produce(obj, draft => { const key = 'key'+i const value = 'value'+i draft[key] = {key, value} }) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
object spread
immutable-js
immer

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 6 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0.1 Safari/605.1.15

Browser/OS: Safari 26 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
object spread	65.4 Ops/sec
immutable-js	3531.2 Ops/sec
immer	7.4 Ops/sec

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 components.

**Benchmark Overview**

The benchmark is designed to compare three approaches for creating an object with multiple key-value pairs:

1. Object spread (`object spread`)
2. Immutable.js (`immutable-js`)
3. Immer (`immer`)

Each approach has a unique way of constructing the object, which affects performance.

**Options Compared**

Here's a summary of the options compared in each test case:

* `object spread`: Uses the spread operator (`{...obj, [key]: {key, value}}`) to create a new object with the updated key-value pair.
* `immutable-js`: Uses the `Immutable.Map()` constructor and sets individual key-value pairs using the `set()` method (`obj = obj.set(key, {key, value})`).
* `immer`: Uses the `produce()` function from Immer to update the existing object by creating a draft copy of the object and modifying it (`draft[key] = {key, value}`).

**Pros and Cons of Each Approach**

Here's a brief summary of the pros and cons of each approach:

* **Object Spread**
	+ Pros: Simple, easy to understand, and widely supported.
	+ Cons: Creates a new object on each iteration, leading to high memory allocation and garbage collection overhead.
* **Immutable.js**
	+ Pros: Ensures immutability by creating a new copy of the object, which can lead to better performance in some scenarios.
	+ Cons: Requires additional library imports (Immutable.js) and may introduce overhead due to the creation of multiple objects.
* **Immer**
	+ Pros: Provides a more efficient way of updating existing objects by reusing the draft copy, reducing memory allocation and garbage collection overhead.
	+ Cons: Requires additional library imports (Immer) and can be less intuitive for developers unfamiliar with the concept of drafts.

**Library Used**

The benchmark uses the following libraries:

* **Immutable.js**: A library that provides immutable data structures and operations. It's used in the `immutable-js` test case to create an Immutable Map.
* **Immutability-helper**: A utility library that provides helper functions for working with Immutable.js data structures, including the Immer library used in the `immer` test case.
* **Immer**: A library that provides a more efficient way of updating existing objects.

**Special JS Features/Syntax**

None of the benchmark test cases use special JavaScript features or syntax. They focus on demonstrating the performance differences between three standard object creation approaches.

**Alternatives**

If you're looking for alternative object creation approaches, consider:

* Using an array and accessing the element by its index instead of using bracket notation.
* Creating objects manually using the `Object.create()` method and then adding properties to it.
* Using a library like Lodash or Ramda that provides utility functions for working with objects.

These alternatives may offer different trade-offs in terms of performance, readability, and maintainability.

Related benchmarks:

object spread vs immutable-js set vs immer 2 (version: 0)

Comparing performance of: object spread vs immutable-js vs immer

Created: 3 years ago by: Guest

Jump to the latest result

object spread

immutable-js

immer

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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