Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
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
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>
Run tests (4)
Previous results
Fork
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
Embed
Embed Benchmark Result
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):
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 Reduce4
Immer vs Spread Only Reducer With Filled State
Object.assign vs Immer vs Spread Reducer With Filled State
Immer vs Spread Immer
Comments
Confirm delete:
Do you really want to delete benchmark?