Benchmark: Immer vs Spread Reduce9

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/immer@3.1.3/dist/immer.umd.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

data = _.range(100)

Tests:

immer
const reducer = immer.produce((draft, curr) => { draft[0] = 0; }); const answer = data.reduce(reducer, {})
Mutate
const reducer = (draft, curr) => { draft[0] = 0; return draft; }; const answer = data.reduce(reducer, {})
Spread
const answer = data.reduce((acc, curr) => ({ ...acc, 0: 0, }), {});
immer pull up
const answer = immer.produce({}, draft => { data.reduce((acc, curr) => { acc[0] = 0; return acc }, draft) });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
immer
Mutate
Spread
immer pull up

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 125 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
immer	32824.3 Ops/sec
Mutate	2419474.2 Ops/sec
Spread	549029.3 Ops/sec
immer pull up	133659.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

The provided JSON represents a benchmark test case created using MeasureThat.net, which compares three different approaches for reducing an array in JavaScript: Immer's `produce` function, the "Mutate" approach (which is actually just modifying the original array), and the "Spread" approach (using the spread operator to create a new array).

**Immer's produce function**

The first test case uses Immer's `produce` function, which is a library that provides a safe way to update immutable data structures. In this case, it creates an reducer function that takes two arguments: `draft` and `curr`. The reducer function sets the value of `draft[0]` to 0 using the spread operator (`{...draft, 0: 0}`). Then, it reduces the `data` array using this reducer function with an initial value of `{}`.

The purpose of Immer's `produce` function is to provide a safe and predictable way to update immutable data structures, avoiding common pitfalls like mutating state or creating side effects. This library is useful when working with complex data structures that require immutability, such as in reactive programming or state management.

**Mutate approach**

The second test case uses the "Mutate" approach, which is simply modifying the original array by setting its first element to 0.

This approach is straightforward but has some drawbacks. By modifying the original array, it can lead to unexpected behavior if the array is not expected to change, and it also creates a side effect (the modification of the original data). This approach is generally discouraged in favor of more predictable and immutable approaches like Immer's `produce` function.

**Spread approach**

The third test case uses the "Spread" approach, which creates a new array using the spread operator (`const answer = [...data, 0]`).

This approach is simple but has some limitations. By creating a new array, it can lead to memory allocation and garbage collection overhead, especially for large datasets. Additionally, this approach does not provide any guarantees about the immutability of the data structure.

**Comparison and pros/cons**

| Approach | Description | Pros | Cons |
| --- | --- | --- | --- |
| Immer's produce function | Safe and predictable way to update immutable data structures | Predictable behavior, avoids side effects | Can be slower than other approaches due to additional overhead |
| Mutate approach | Simple and straightforward | Easy to implement, no additional overhead | Creates side effects, can lead to unexpected behavior if not expected |
| Spread approach | Simple and easy to understand | No additional overhead, easy to implement | Can lead to memory allocation and garbage collection overhead |

**Benchmark results**

The latest benchmark result shows that the "Mutate" approach is significantly faster than the other two approaches, followed by Immer's `produce` function. The "Spread" approach is slower due to its potential for memory allocation and garbage collection overhead.

It's worth noting that the performance differences between these approaches may vary depending on the specific use case and dataset being used.

Related benchmarks:

Immer vs Spread Reduce9 (version: 0)

Comparing performance of: immer vs Mutate vs Spread vs immer pull up

Created: 6 years ago by: Guest

Jump to the latest result

immer

Mutate

Spread

immer pull up

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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