Benchmark: Immer vs Spread Reduce5

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:

function getItems(count) {
  let id = 1;
  return _.times(count, () => ({
    name: "city" + id++,
    visited: true
  }))
}
data = getItems(100)

Tests:

immer
return immer.produce({}, draft => { data.reduce((acc, curr) => { acc[curr.name] = curr.visited; return acc; }, draft); });
Spread
data.reduce((acc, curr) => ({ ...acc, [curr.name]: curr.visited, }), {});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
immer
Spread

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 dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The benchmark is designed to compare two approaches for merging objects in JavaScript: Immer and Spread. The test creates an array of 100 objects, each with a "name" property that increments by 1 (from 1 to 100). The task is to merge these objects into a single object.

**Benchmark Definition JSON**

The benchmark definition consists of two parts:

1. **Script Preparation Code**: This code defines a function `getItems` that generates an array of 100 objects with the specified properties. The resulting data is assigned to a variable `data`.
2. **Html Preparation Code**: These lines include necessary scripts:
	* Immer library (version 3.1.3) for functional updates.
	* Lodash library (version 4.17.5) for utility functions.

**Individual Test Cases**

There are two test cases:

1. **Immer**:
```javascript
return immer.produce({}, draft => {
  data.reduce((acc, curr) => {
    acc[curr.name] = curr.visited;
    return acc;
  }, draft);
});
```
This code uses Immer's `produce` function to create a new object and update it with the merged properties. The `reduce` method is used to iterate over the `data` array and merge each object into the accumulator (`acc`).

2. **Spread**:
```javascript
data.reduce((acc, curr) => ({ ...acc, [curr.name]: curr.visited }), {});
```
This code uses the spread operator (`...`) to create a new object and merge its properties from the `data` array. The `reduce` method is used to iterate over the `data` array and add each object's properties to the accumulator (`acc`).

**Pros and Cons**

* **Immer**: Pros:
	+ Provides a functional update approach, which can be more predictable and easier to reason about.
	+ Uses immutable data structures by default.
	+ Supports advanced features like side effects and transactional updates.
* Cons:
	+ Can have higher overhead due to the creation of new objects.
	+ May not perform as well for large datasets or complex updates.
* **Spread**: Pros:
	+ Simple and concise syntax.
	+ Fast and efficient, especially for small to medium-sized datasets.
	+ Does not require creating new objects (only copies existing ones).
* Cons:
	+ Can lead to mutable state and shared references between objects.
	+ May cause unexpected behavior when dealing with large or complex data structures.

**Library and Syntax**

The Immer library provides a functional update approach for updating objects in JavaScript. Its `produce` function creates a new object and updates it with the merged properties, while its `update` function can be used to modify existing objects. The spread operator (`...`) is a built-in JavaScript syntax that allows creating new objects by copying properties from an existing one.

**Special JS Feature or Syntax**

This benchmark does not use any special JavaScript features or syntax beyond what's standard in modern browsers (ES6+).

**Other Alternatives**

Other approaches for merging objects in JavaScript include:

* `Object.assign()`: A method that copies properties from an existing object to a new one.
* Using `forEach()` and modifying the accumulator directly: This approach can lead to mutable state and shared references between objects.

Keep in mind that this benchmark focuses specifically on comparing Immer's functional update approach with Spread, so it might not be representative of other alternatives.

Related benchmarks:

Immer vs Spread Reduce5 (version: 0)

Comparing performance of: immer vs Spread

Created: 6 years ago by: Guest

Jump to the latest result

immer

Spread

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