Run results for: Immerjs vs lodash.merge

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:121.0) Gecko/20100101 Firefox/121.0

Browser: Firefox 121

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Benchmark engine: Benchmark.js

Immerjs without state change

511K/s

Immerjs when we have pre-freezed state

172K/s

Immerjs state update

163K/s

Lodash freeze + merge

36K/s

View exact numbers

Test name	Executions per second
✓ Immerjs without state change	511,352 Ops/sec
Immerjs when we have pre-freezed state	172,385 Ops/sec
Immerjs state update	162,523 Ops/sec
Lodash freeze + merge	35,583 Ops/sec

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js'></script>
<script src="https://unpkg.com/immer@6.0.3/dist/immer.umd.production.min.js"></script>

Script Preparation code:

var preFreezedState = Object.freeze({
	"label": {"id":34,"title":"First label","data":{"dimension":{"height":2,"margin":{"bottom":0.1,"left":0.1,"right":0.1,"top":0.1},"width":3},"gridSize":0.05,"items":[{"format":{"align":"LEFT","size":9},"id":"e9b0ffbe-e383-4f53-ad16-cef1bcf3f67d","position":{"height":0.3958333333333333,"left":0.8020833333333334,"top":0.5104166666666666,"width":1.3958333333333333},"type":"DYNAMIC_TEXT"},{"format":{"align":"LEFT","size":12},"id":"52c5473c-0802-48c6-87b2-61919bb2370b","position":{"height":0.40625,"left":0.10416666666666667,"top":0.10416666666666667,"width":2.6770833333333335},"text":"MY FIRST LABEL","type":"STATIC_TEXT"},{"id":"c0cedbe6-2789-4c56-8a1f-47db275cad1f","position":{"height":1.7708333333333333,"left":2.3958333333333335,"top":0.10416666666666667,"width":0.5},"rotation":90,"type":"BAR_CODE"},{"format":{"align":"LEFT","size":9},"id":"b039a74d-7c11-4f98-8d97-b1d69a8afa31","position":{"height":0.3541666666666667,"left":0.10416666666666667,"top":1.53125,"width":1.40625},"type":"DYNAMIC_TEXT"},{"format":{"align":"LEFT","size":9},"id":"fec7ea39-26d5-419b-ae00-67cfca3d244a","position":{"height":0.3958333333333333,"left":0.10416666666666667,"top":0.5104166666666666,"width":0.6875},"text":"Package","type":"STATIC_TEXT"},{"format":{"align":"LEFT","size":9},"id":"e0981542-f3f5-4634-94f4-afca2f5479b7","position":{"height":0.3958333333333333,"left":0.10416666666666667,"top":0.9270833333333334,"width":0.6979166666666666},"text":"Cost","type":"STATIC_TEXT"},{"format":{"align":"LEFT","size":9},"id":"4b07ab0f-412e-46a3-ba13-c8698b267264","position":{"height":0.3958333333333333,"left":0.8020833333333334,"top":0.9270833333333334,"width":1.3958333333333333},"type":"DYNAMIC_TEXT"}],"meta":[{"id":"e9b0ffbe-e383-4f53-ad16-cef1bcf3f67d","value":"packageLabel"},{"id":"c0cedbe6-2789-4c56-8a1f-47db275cad1f","value":"receivedDate"},{"id":"b039a74d-7c11-4f98-8d97-b1d69a8afa31","value":"receivedDate"},{"id":"4b07ab0f-412e-46a3-ba13-c8698b267264","value":"costPerUnit"}],"unit":"in","version":1}}
})

Tests:

Lodash freeze + merge
const likeReducerFn = (state) => { Object.freeze(state) const newState = _.merge({}, state); newState.label.id = 3 return newState } const state = { "label": {"id":34,"title":"First label","data":{"dimension":{"height":2,"margin":{"bottom":0.1,"left":0.1,"right":0.1,"top":0.1},"width":3},"gridSize":0.05,"items":[{"format":{"align":"LEFT","size":9},"id":"e9b0ffbe-e383-4f53-ad16-cef1bcf3f67d","position":{"height":0.3958333333333333,"left":0.8020833333333334,"top":0.5104166666666666,"width":1.3958333333333333},"type":"DYNAMIC_TEXT"},{"format":{"align":"LEFT","size":12},"id":"52c5473c-0802-48c6-87b2-61919bb2370b","position":{"height":0.40625,"left":0.10416666666666667,"top":0.10416666666666667,"width":2.6770833333333335},"text":"MY FIRST LABEL","type":"STATIC_TEXT"},{"id":"c0cedbe6-2789-4c56-8a1f-47db275cad1f","position":{"height":1.7708333333333333,"left":2.3958333333333335,"top":0.10416666666666667,"width":0.5},"rotation":90,"type":"BAR_CODE"},{"format":{"align":"LEFT","size":9},"id":"b039a74d-7c11-4f98-8d97-b1d69a8afa31","position":{"height":0.3541666666666667,"left":0.10416666666666667,"top":1.53125,"width":1.40625},"type":"DYNAMIC_TEXT"},{"format":{"align":"LEFT","size":9},"id":"fec7ea39-26d5-419b-ae00-67cfca3d244a","position":{"height":0.3958333333333333,"left":0.10416666666666667,"top":0.5104166666666666,"width":0.6875},"text":"Package","type":"STATIC_TEXT"},{"format":{"align":"LEFT","size":9},"id":"e0981542-f3f5-4634-94f4-afca2f5479b7","position":{"height":0.3958333333333333,"left":0.10416666666666667,"top":0.9270833333333334,"width":0.6979166666666666},"text":"Cost","type":"STATIC_TEXT"},{"format":{"align":"LEFT","size":9},"id":"4b07ab0f-412e-46a3-ba13-c8698b267264","position":{"height":0.3958333333333333,"left":0.8020833333333334,"top":0.9270833333333334,"width":1.3958333333333333},"type":"DYNAMIC_TEXT"}],"meta":[{"id":"e9b0ffbe-e383-4f53-ad16-cef1bcf3f67d","value":"packageLabel"},{"id":"c0cedbe6-2789-4c56-8a1f-47db275cad1f","value":"receivedDate"},{"id":"b039a74d-7c11-4f98-8d97-b1d69a8afa31","value":"receivedDate"},{"id":"4b07ab0f-412e-46a3-ba13-c8698b267264","value":"costPerUnit"}],"unit":"in","version":1}} } likeReducerFn(state)
Immerjs state update
const likeReducerFn = (state, draft) => immer.produce(state, draft => { draft.label.id = 3 }) const state = { "label": {"id":34,"title":"First label","data":{"dimension":{"height":2,"margin":{"bottom":0.1,"left":0.1,"right":0.1,"top":0.1},"width":3},"gridSize":0.05,"items":[{"format":{"align":"LEFT","size":9},"id":"e9b0ffbe-e383-4f53-ad16-cef1bcf3f67d","position":{"height":0.3958333333333333,"left":0.8020833333333334,"top":0.5104166666666666,"width":1.3958333333333333},"type":"DYNAMIC_TEXT"},{"format":{"align":"LEFT","size":12},"id":"52c5473c-0802-48c6-87b2-61919bb2370b","position":{"height":0.40625,"left":0.10416666666666667,"top":0.10416666666666667,"width":2.6770833333333335},"text":"MY FIRST LABEL","type":"STATIC_TEXT"},{"id":"c0cedbe6-2789-4c56-8a1f-47db275cad1f","position":{"height":1.7708333333333333,"left":2.3958333333333335,"top":0.10416666666666667,"width":0.5},"rotation":90,"type":"BAR_CODE"},{"format":{"align":"LEFT","size":9},"id":"b039a74d-7c11-4f98-8d97-b1d69a8afa31","position":{"height":0.3541666666666667,"left":0.10416666666666667,"top":1.53125,"width":1.40625},"type":"DYNAMIC_TEXT"},{"format":{"align":"LEFT","size":9},"id":"fec7ea39-26d5-419b-ae00-67cfca3d244a","position":{"height":0.3958333333333333,"left":0.10416666666666667,"top":0.5104166666666666,"width":0.6875},"text":"Package","type":"STATIC_TEXT"},{"format":{"align":"LEFT","size":9},"id":"e0981542-f3f5-4634-94f4-afca2f5479b7","position":{"height":0.3958333333333333,"left":0.10416666666666667,"top":0.9270833333333334,"width":0.6979166666666666},"text":"Cost","type":"STATIC_TEXT"},{"format":{"align":"LEFT","size":9},"id":"4b07ab0f-412e-46a3-ba13-c8698b267264","position":{"height":0.3958333333333333,"left":0.8020833333333334,"top":0.9270833333333334,"width":1.3958333333333333},"type":"DYNAMIC_TEXT"}],"meta":[{"id":"e9b0ffbe-e383-4f53-ad16-cef1bcf3f67d","value":"packageLabel"},{"id":"c0cedbe6-2789-4c56-8a1f-47db275cad1f","value":"receivedDate"},{"id":"b039a74d-7c11-4f98-8d97-b1d69a8afa31","value":"receivedDate"},{"id":"4b07ab0f-412e-46a3-ba13-c8698b267264","value":"costPerUnit"}],"unit":"in","version":1}} } likeReducerFn(state)
Immerjs without state change
const likeReducerFn = (state, draft) => immer.produce(state, draft => { }) const state = { "label": {"id":34,"title":"First label","data":{"dimension":{"height":2,"margin":{"bottom":0.1,"left":0.1,"right":0.1,"top":0.1},"width":3},"gridSize":0.05,"items":[{"format":{"align":"LEFT","size":9},"id":"e9b0ffbe-e383-4f53-ad16-cef1bcf3f67d","position":{"height":0.3958333333333333,"left":0.8020833333333334,"top":0.5104166666666666,"width":1.3958333333333333},"type":"DYNAMIC_TEXT"},{"format":{"align":"LEFT","size":12},"id":"52c5473c-0802-48c6-87b2-61919bb2370b","position":{"height":0.40625,"left":0.10416666666666667,"top":0.10416666666666667,"width":2.6770833333333335},"text":"MY FIRST LABEL","type":"STATIC_TEXT"},{"id":"c0cedbe6-2789-4c56-8a1f-47db275cad1f","position":{"height":1.7708333333333333,"left":2.3958333333333335,"top":0.10416666666666667,"width":0.5},"rotation":90,"type":"BAR_CODE"},{"format":{"align":"LEFT","size":9},"id":"b039a74d-7c11-4f98-8d97-b1d69a8afa31","position":{"height":0.3541666666666667,"left":0.10416666666666667,"top":1.53125,"width":1.40625},"type":"DYNAMIC_TEXT"},{"format":{"align":"LEFT","size":9},"id":"fec7ea39-26d5-419b-ae00-67cfca3d244a","position":{"height":0.3958333333333333,"left":0.10416666666666667,"top":0.5104166666666666,"width":0.6875},"text":"Package","type":"STATIC_TEXT"},{"format":{"align":"LEFT","size":9},"id":"e0981542-f3f5-4634-94f4-afca2f5479b7","position":{"height":0.3958333333333333,"left":0.10416666666666667,"top":0.9270833333333334,"width":0.6979166666666666},"text":"Cost","type":"STATIC_TEXT"},{"format":{"align":"LEFT","size":9},"id":"4b07ab0f-412e-46a3-ba13-c8698b267264","position":{"height":0.3958333333333333,"left":0.8020833333333334,"top":0.9270833333333334,"width":1.3958333333333333},"type":"DYNAMIC_TEXT"}],"meta":[{"id":"e9b0ffbe-e383-4f53-ad16-cef1bcf3f67d","value":"packageLabel"},{"id":"c0cedbe6-2789-4c56-8a1f-47db275cad1f","value":"receivedDate"},{"id":"b039a74d-7c11-4f98-8d97-b1d69a8afa31","value":"receivedDate"},{"id":"4b07ab0f-412e-46a3-ba13-c8698b267264","value":"costPerUnit"}],"unit":"in","version":1}} } likeReducerFn(preFreezedState)
Immerjs when we have pre-freezed state
const likeReducerFn = (state, draft) => immer.produce(state, draft => { draft.label.id = 3 }) // as... state was freezed by previous reducer likeReducerFn(preFreezedState)