Test name | Executions per second |
---|---|
immer.produce() | 281903.0 Ops/sec |
_.cloneDeep | 15.2 Ops/sec |
<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 src="https://cdn.jsdelivr.net/npm/uuid@8.3.2/dist/umd/uuidv4.min.js"></script>
const numSiblings = 500;
const depth = 5;
state = {
data: {
data1: {
data2: 'test',
siblings: Array.from({
length: numSiblings
}).map(() => ({
id: uuidv4()
})),
children: Array.from({
length: depth
}).map(() => ({
id: uuidv4(),
data: {
data1: {
data2: 'test',
siblings: Array.from({
length: numSiblings
}).map(() => ({
id: uuidv4()
})),
children: Array.from({
length: depth
}).map(() => ({
id: uuidv4(),
data: {
data1: {
data2: 'test',
siblings: Array.from({
length: numSiblings
}).map(() => ({
id: uuidv4()
})),
children: Array.from({
length: depth
}).map(() => ({
id: uuidv4(),
data: {
data1: {
data2: 'test',
siblings: Array.from({
length: numSiblings
}).map(() => ({
id: uuidv4()
})),
},
},
})),
},
},
})),
},
},
})),
},
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';