Benchmark: Immer vs Spread Reducer With Filled State (replace with same key and value)

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 }), {})
action = { name: 'city1', visited: true };

Tests:

immer
const reducer = (state, curr) => { return immer.produce(state, draft => { draft[curr.name] = curr.visited }) }; reducer(data, action)
Mutate
const reducer = (draft, curr) => { draft[curr.name] = curr.visited; return draft; }; reducer(data, action)
Spread
const reducer = (draft, curr) => ({ ...draft, [curr.name]: curr.visited }); reducer(data, action)
immer pull up
const reducer = immer.produce((draft, curr) => { draft[curr.name] = curr.visited; }); reducer(data, action)

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:

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.

Let's dive into the world of JavaScript microbenchmarks and explore what's being tested on MeasureThat.net.

**Benchmark Definition:**
The benchmark is comparing four different approaches to update state in a reducer function, which is a fundamental concept in React and other state management libraries. The goal is to determine which approach is most efficient.

**Approaches compared:**

1. **Immer**: Immer is a library that provides a safe and efficient way to work with immutable data structures. It uses a technique called "drafting" to create a shallow copy of the original data, allowing for fast and predictable updates.
2. **Mutate**: This approach involves directly modifying the existing state object, which can lead to unexpected behavior if not done carefully.
3. **Spread**: Similar to mutate, this approach uses the spread operator (`{ ... }`) to create a new object with the updated values.
4. **Immer pull up**: This is a variant of the immer approach, but instead of using `immer.produce`, it uses the `immer.pullUp` method to update the state.

**Pros and Cons:**

* **Immer**:
	+ Pros: predictable updates, fast performance, easy to use.
	+ Cons: can be slower for small states, requires additional library inclusion.
* **Mutate**:
	+ Pros: simple and intuitive, no additional libraries required.
	+ Cons: can lead to unexpected behavior if not done carefully, may have performance issues.
* **Spread**:
	+ Pros: easy to understand, no additional libraries required.
	+ Cons: can be slower than immer for large states, may have issues with deep copying.
* **Immer pull up**:
	+ Pros: similar benefits to immer, but with a slightly different API.
	+ Cons: less commonly used and tested.

**Library usage:**
The benchmark uses the `immer` library version 3.1.3, which provides a safe and efficient way to work with immutable data structures. The `lodash` library is also included for its utility functions.

**Special JavaScript features/syntax:**
None of the approaches rely on any special JavaScript features or syntax beyond what's standard in modern JavaScript implementations.

**Other considerations:**

* **State size**: The benchmark measures performance for a large state object (1000 items), which can affect the relative efficiency of each approach.
* **Execution frequency**: The benchmark runs the test cases multiple times to measure execution frequency, which is an important metric for evaluating performance.

In summary, this benchmark compares four different approaches to update state in a reducer function: Immer, Mutate, Spread, and Immer pull up. Each approach has its pros and cons, and understanding these differences can help developers choose the most efficient approach for their specific use case.

Related benchmarks:

Immer vs Spread Reducer With Filled State (replace with same key and value) (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

No previous run results

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