Benchmark: Immer vs Spread Only Reducer With Filled State

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(1000).reduce((acc, curr) => ({ ...acc, [curr.name]: curr.visited }), {})

Tests:

immer
const reducer = (state, curr) => { return immer.produce(state, draft => { draft[curr] = curr }) }; reducer(data, 'yolo')
Spread
const reducer = (draft, curr) => ({ ...draft, [curr]: curr }); reducer(data, 'yolo')

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:

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/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
immer	3626.2 Ops/sec
Spread	817459.1 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 provided benchmark and explain what is being tested.

**Benchmark Definition**

The benchmark tests two approaches to updating an object in JavaScript: using `Immer` and using the spread operator (`...`). The benchmark creates a large dataset with 1000 items, each with a "name" and a "visited" property. The goal is to update the `visited` property of an item with a specific name.

**Script Preparation Code**

The script preparation code defines two functions:

1. `getItems(count)`: generates an array of objects with the specified count.
2. `data = getItems(1000).reduce((acc, curr) => ({ ...acc, [curr.name]: curr.visited }), {})`: reduces the array of items to a single object with the updated `visited` property.

**Html Preparation Code**

The HTML preparation code includes two external scripts:

1. `https://cdn.jsdelivr.net/npm/immer@3.1.3/dist/immer.umd.min.js`: loads the Immer library.
2. `https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js`: loads the Lodash library.

**Individual Test Cases**

The benchmark consists of two individual test cases:

1. **Immer**: uses the `immer.produce` function to update the object, which creates a new draft and updates it in place.
2. **Spread**: uses the spread operator (`...`) to create a new copy of the state and updates it.

**Pros and Cons**

Here are some pros and cons of each approach:

* **Immer**:
	+ Pros: Immer provides a safe and efficient way to update objects, especially when dealing with complex data structures.
	+ Cons: requires additional setup and imports an external library.
* **Spread**:
	+ Pros: simple and lightweight, uses built-in JavaScript features.
	+ Cons: can be slower for large datasets, may lead to unnecessary copies of the state.

**Library: Lodash**

Lodash is a utility library that provides various functions for working with arrays, objects, and other data structures. In this benchmark, Lodash is used as a dependency, but its purpose is not directly related to the benchmark itself.

**Special JS Feature/ Syntax**

There are no special JavaScript features or syntaxes being tested in this benchmark. The focus is on comparing two different approaches to updating an object in JavaScript.

**Other Alternatives**

If you were to test other alternatives for updating objects, some possibilities could include:

* Using a library like React's `useCallback` or `useState` hooks
* Implementing your own custom update function using recursion or iteration
* Using a data structure like a Map or an object with closures

Keep in mind that the benchmark is focused on comparing Immer and spread-based approaches, so exploring other alternatives would require a different set of test cases and scenarios.

Related benchmarks:

Immer vs Spread Only Reducer With Filled State (version: 0)

Comparing performance of: immer vs Spread

Created: 5 years ago by: Registered User

Jump to the latest result

immer

Spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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