Benchmark: Immer vs Spread - MeasureThat.net

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')
immer pull up
const reducer = immer.produce((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
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/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
immer	2267.1 Ops/sec
Spread	764490.9 Ops/sec
immer pull up	2002.9 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is being tested?**

The provided JSON represents a JavaScript microbenchmark on the Immer library, specifically comparing three different approaches to update state in an application: using the spread operator (`{ ...draft, [curr]: curr }`), `immer.produce()` with a callback function (`immer.produce((draft, curr) => { draft[curr] = curr; })`), and the original `immer.produce()` function without a callback.

**Options being compared**

The three options being compared are:

1. **Spread operator**: Using the spread operator to update state in an application.
2. **Immer with callback**: Using the `immer.produce()` function with a callback function to update state.
3. **Original Immer produce**: Using the original `immer.produce()` function without a callback.

**Pros and Cons of each approach**

1. **Spread operator**:
	* Pros: concise, easy to read, and maintain.
	* Cons: might be slower than other approaches since it creates a new object with the updated state.
2. **Immer with callback**: 
	* Pros: provides more control over the updating process and can be optimized for performance.
	* Cons: requires understanding of the Immer library's API, which might make it harder to read and maintain.
3. **Original Immer produce**:
	* Pros: provides fine-grained control over the updating process and is often faster than other approaches.
	* Cons: requires more manual memory management and can be error-prone if not used correctly.

**Library usage**

The `Immer` library is being used to compare different approaches to update state in an application. Immer provides a simple way to manage state changes by creating a draft of the current state, applying updates to it, and then merging the updated draft back into the original state.

**Special JavaScript feature or syntax**

There are no special JavaScript features or syntaxes being used in this benchmark. However, it's worth noting that `immer.produce()` is a function from the Immer library that provides a way to safely update state without mutating the original object.

**Other alternatives**

If you're looking for alternative libraries or approaches to manage state updates, some options include:

1. **Redux**: A popular state management library for JavaScript applications.
2. **MobX**: Another state management library that provides a reactive approach to updating state.
3. **React Context API**: A built-in API in React that allows you to manage global state without using a separate library.

In summary, the benchmark is comparing three different approaches to update state in an application using the Immer library: using the spread operator, `immer.produce()` with a callback function, and the original `immer.produce()` function. The pros and cons of each approach are being evaluated to determine which one provides the best performance and maintainability for updating state in JavaScript applications.

Related benchmarks:

Immer vs Spread (version: 0)

Comparing performance of: immer vs Spread vs immer pull up

Created: 4 years ago by: Guest

Jump to the latest result

immer

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