<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>
state = {
data: {
data1: {
data2: 'test',
},
data3: Array.from({length: 1000}).map(() => document.createElement('div'))
}
};
const result = immer.produce(state, draft => { draft.data.data1.data2 = 'updated' })
const result = _.cloneDeep(state);
result.data.data1.data2 = 'updated';
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
Produce | |
CloneDeep |
Test name | Executions per second |
---|---|
Produce | 378127.8 Ops/sec |
CloneDeep | 5619.0 Ops/sec |
The provided JSON represents a benchmark test case for measuring the performance of two different approaches: Immer's produce
function and Lodash's cloneDeep
function.
What is being tested?
In this benchmark, we have a complex data structure state
, which consists of an object data
with multiple nested objects and arrays. The goal is to update the value of data.data1.data2
using two different approaches:
produce
function: This function creates a new copy of the original data structure, allowing us to safely mutate it without affecting the original.cloneDeep
function: This function creates a deep clone of the original data structure, which can be used to create a new independent copy.Options being compared
We are comparing two options:
produce
is a specific function that creates a new copy of the original data structure, allowing us to update it without affecting the original.cloneDeep
is a specific function that creates a deep clone of the original data structure.Pros and Cons
Here are some pros and cons of each approach:
Immer's produce
Pros:
Cons:
Lodash's cloneDeep
Pros:
Cons:
Other considerations
When using either approach, consider the following:
produce
with caution when working with very large or complex data structures, as it can lead to performance issues.cloneDeep
with care when updating large data structures, as it can consume a significant amount of memory.Library and its purpose
Immer is a library that provides immutable data structures and functions for working with them. Its primary goal is to help developers write more predictable, reliable, and concurrent code.
Lodash is a utility library that provides various functions for working with data, including cloning, mutating, and transforming. Its primary goal is to provide a comprehensive set of tools for common data-related tasks.
Special JS feature or syntax
This benchmark does not use any special JavaScript features or syntax beyond the standard language features provided by the browsers and Node.js environments used to run it.