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

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Immerjs without state change

2.2M/s

Immerjs when we have pre-freezed state

693K/s

Immerjs state update

568K/s

Lodash freeze + merge

77K/s

View exact numbers

Test name	Executions per second
✓ Immerjs without state change	2,166,752 Ops/sec
Immerjs when we have pre-freezed state	692,928 Ops/sec
Immerjs state update	567,812 Ops/sec
Lodash freeze + merge	76,629 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

I'll provide my answer without the preamble.

**Benchmark results analysis**

The benchmark results show four different test cases:

1. **Immerjs without state change**: This test case measures the performance of Immerjs when there is no state update. The execution per second (ExecutionsPerSecond) values are 1346368.25, 384674.0, and 334793.125 across three different executions.
2. **Immerjs with pre-freezed state**: This test case measures the performance of Immerjs when there is a pre-freezed state. The execution per second (ExecutionsPerSecond) values are 53485.03125, indicating that this test case is slower than the others.
3. **Immerjs state update**: This test case measures the performance of Immerjs with an actual state update. The execution per second (ExecutionsPerSecond) value is 53385.03125.
4. **Lodash freeze + merge**: This test case measures the performance of Lodash when combined with Immerjs for a pre-freezed state. The execution per second (ExecutionsPerSecond) value is 53385.03125.

**Key observations**

* The Immerjs without state change and Immerjs state update test cases have similar execution per second values, indicating that the performance difference between them is minimal.
* The Immerjs with pre-freezed state test case has a significantly lower execution per second value compared to the others, indicating potential performance issues when using pre-freezed states.
* The Lodash freeze + merge test case has similar execution per second values as the Immerjs without state change and Immerjs state update test cases, suggesting that the overhead of Lodash freezing is manageable.

**Conclusion**

The benchmark results suggest that:

* Immerjs performs well when there are no state updates or when using pre-freezed states.
* Using pre-freezed states can lead to significant performance issues.
* Lodash freeze + Immerjs combination is relatively performant, despite the overhead of Lodash freezing.

Immerjs vs lodash.merge (version: 1) Benchmark.js

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

Created: 5 years ago by: Registered User

Go 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>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Immerjs vs lodash.merge (version: 1) Benchmark.js

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

Created: 5 years ago by: Registered User

Go 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>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

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