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

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: 8 months 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

Test name	Executions per second
immer	4060.1 Ops/sec
Mutate	129418592.0 Ops/sec
Spread	12202.3 Ops/sec
immer pull up	5740122.5 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.

Related benchmarks:

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

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

Created: 6 years ago by: Guest

Jump to the latest result

immer

Mutate

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