Benchmark: Immerjs vs lodash.merge

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)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash freeze + merge
Immerjs state update
Immerjs without state change
Immerjs when we have pre-freezed state

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 4 months ago)

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

Browser/OS: Firefox 121 on Windows

View result in a separate tab

Test name	Executions per second
Lodash freeze + merge	35582.5 Ops/sec
Immerjs state update	162523.3 Ops/sec
Immerjs without state change	511351.7 Ops/sec
Immerjs when we have pre-freezed state	172384.6 Ops/sec

Immerjs vs lodash.merge (version: 1)

Comparing performance of: Lodash freeze + merge vs Immerjs state update vs Immerjs without state change vs Immerjs when we have pre-freezed state

Created: 3 years ago by: Registered User

Jump to the latest result

Lodash freeze + merge

Immerjs state update

Immerjs without state change

Immerjs when we have pre-freezed state

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A