Benchmark: Immer vs Spread 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')
Mutate
const reducer = (draft, curr) => { draft[curr] = curr; return draft; }; 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')

Historical Performance Data aggregated from 61 community runs

Desktop Results:

Chrome 54 runs

Mutate

14.3M/s

immer pull up

2.5M/s

Spread

8K/s

immer

2K/s

Fastest: Mutate (6248.6x faster)

View exact numbers

✓ Mutate: 14,325,314 ops/sec
• immer pull up: 2,526,260 ops/sec
• Spread: 7,667 ops/sec
• immer: 2,293 ops/sec

Firefox 7 runs

Mutate

856.5M/s

immer pull up

1.3M/s

Spread

29K/s

immer

5K/s

Fastest: Mutate (174214.5x faster)

View exact numbers

✓ Mutate: 856,505,344 ops/sec
• immer pull up: 1,311,106 ops/sec
• Spread: 29,013 ops/sec
• immer: 4,916 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36

Browser/OS: Chrome 139 on Windows

View result in a separate tab

Mutate

129.4M/s

immer pull up

5.7M/s

Spread

12K/s

immer

4K/s

View exact numbers

Test name	Executions per second
✓ Mutate	129,418,592 Ops/sec
immer pull up	5,740,122 Ops/sec
Spread	12,202 Ops/sec
immer	4,060 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 on MeasureThat.net.

The benchmark in question compares four different approaches to updating state in an immutable data structure:

1. **Immer**: A library that helps you work with immutable data structures by creating a copy of the current state and then modifying the copy.
2. **Mutate**: Directly modifying the existing state object.
3. **Spread**: Using the spread operator (`{ ... }`) to create a new object with the updated values.

**Immer**

The `immer` approach uses the `immer.produce()` function to update the state. This function creates a copy of the current state and then applies the updates using a callback function. In this specific benchmark, it's used to update an object with nested properties.

Pros:

* Immer provides a safe and predictable way to update state in immutable data structures.
* It helps avoid common issues like mutation by reference or unexpected side effects.

Cons:

* Immer can be slower than other approaches since it creates a copy of the current state.
* It requires additional setup and imports, as seen in the benchmark's HTML preparation code.

**Mutate**

The `mutate` approach is straightforward: directly modifying the existing state object. This approach assumes that the data structure is not shared between multiple parts of the application.

Pros:

* Fastest approach since it doesn't require creating a copy of the state.
* Simple and easy to implement.

Cons:

* Can lead to unexpected side effects if the same state is modified concurrently by different parts of the application.
* May cause issues with data consistency and predictability.

**Spread**

The `spread` approach uses the spread operator (`{ ... }`) to create a new object with the updated values. This approach assumes that the data structure is not shared between multiple parts of the application.

Pros:

* Faster than Immer since it doesn't require creating a copy of the state.
* Easy to implement and understand.

Cons:

* May not be suitable for all use cases, as it can lead to unexpected side effects if the same state is modified concurrently by different parts of the application.
* Requires careful consideration when working with nested objects or complex data structures.

**Other considerations**

When choosing an approach, consider the following factors:

* **Predictability**: Immer provides a safe and predictable way to update state in immutable data structures.
* **Performance**: Mutate and Spread approaches are generally faster than Immer since they don't require creating a copy of the state.
* **Data consistency**: If multiple parts of the application need to access and update the same state, consider using an immutable data structure with an approach like Immer or Spread.

**Alternative libraries**

If you're interested in exploring other alternatives, some notable ones include:

* **Redux**: A popular state management library that provides a predictable way to manage global state.
* **MobX**: A reactive state management library that helps you work with reactive data structures and observables.
* **Pinia**: A state management library for Vue.js applications that provides a simple and easy-to-use API.

In conclusion, the choice of approach depends on your specific use case and requirements. While Immer provides a safe and predictable way to update state in immutable data structures, Mutate and Spread approaches can be faster but may require more caution when working with shared states or concurrent updates.

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

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

Created: 7 years ago by: Guest

Go to the latest result

immer

Mutate

Spread

immer pull up

Historical Performance Data aggregated from 61 community runs

Desktop Results:

Chrome 54 runs

Firefox 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

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

Created: 7 years ago by: Guest

Go to the latest result

immer

Mutate

Spread

immer pull up

Historical Performance Data aggregated from 61 community runs

Desktop Results:

Chrome 54 runs

Firefox 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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