Benchmark: Immer vs Spread Immer

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')
immer spread
const reducer = (state, curr) => { return immer.produce(state, draft => ({ ...draft, [curr]: curr })) }; reducer(data, 'yolo')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
immer
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.

**What is being tested?**

MeasureThat.net is running JavaScript microbenchmarks to compare the performance of two approaches: using `Immer` with and without spreading the state object.

The benchmark tests how quickly each approach can update a small portion of an array-like object (simulated by the `data` array in the script preparation code).

**Options being compared**

There are two options being compared:

1. **Immer**: This is a library that provides a more functional and composable way to manage state changes. It uses a draft-based approach, where you create a temporary copy of the current state and modify it without affecting the original state.
2. **Spread Immer**: In this variant, instead of using the `immer.produce` function, which creates a new draft object by spreading the original state, you use the spread operator (`{ ...draft, [curr]: curr }`) to create a new object that includes only the updated properties.

**Pros and Cons**

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

* **Immer (without spreading)**:
	+ Pros: More efficient and composable updates, as it avoids creating unnecessary copies of the original state.
	+ Cons: Can be more verbose and harder to understand for beginners.
* **Spread Immer**:
	+ Pros: Easier to read and write, as it uses a more familiar syntax (e.g., `{ ...draft, [curr]: curr }`).
	+ Cons: Creates an additional copy of the original state, which can be less efficient.

**Library**

The `Immer` library is used in both test cases. It provides a set of functions for managing state changes, including `produce`, which creates a new draft object from the current state.

**Special JS feature or syntax**

There are no special JavaScript features or syntaxes being tested here. The focus is on comparing two different approaches to updating an array-like object using the Immer library.

**Other alternatives**

If you're interested in exploring alternative libraries for managing state changes, some popular options include:

1. **Redux**: A more mature and widely-used state management library that uses a centralized store to manage global state.
2. **MobX**: A reactive state management library that uses observables to automatically update the UI when state changes.
3. **React's Context API**: A way to share state between components without using a centralized store.

Keep in mind that each library has its own strengths and weaknesses, and the choice of which one to use depends on your specific use case and requirements.

Related benchmarks:

Immer vs Spread Immer (version: 0)

Comparing performance of: immer vs immer spread

Created: 3 years ago by: Guest

Jump to the latest result

immer

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