Run results for: Immer & Immutable benchmarks with inceremntal data

Run details:

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

Browser: Chrome 108

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
immer many shorts updates	1.0 Ops/sec
immer one big update	250.5 Ops/sec
immer balanced data change	23.1 Ops/sec
immutable	98.0 Ops/sec
immutable balanced data change	671.8 Ops/sec

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/immer/9.0.17/immer.umd.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/4.2.2/immutable.min.js"></script>

Script Preparation code:

var INITIAL_DATA = { items: {}, count: 0, keys: [] }
var produce = immer.default

var iterationTop = 30;
var iterationBottom = 70;
var iterationFull = iterationTop * iterationBottom;

Tests:

immer many shorts updates
let data = INITIAL_DATA; for (i = 0; i < iterationFull; i++) { data = produce(data, draft => { draft.items[i] = { id: i, name: `NEW-ITEM${i}`, value: i } draft.counter++ draft.keys.push(`NEW-ITEM${i}`) }) }
immer one big update
let data = INITIAL_DATA; data = produce(data, draft => { for (i = 0; i < iterationFull; i++) { draft.items[i] = { id: i, name: `NEW-ITEM${i}`, value: i } draft.counter++ draft.keys.push(`NEW-ITEM${i}`) } })
immer balanced data change
let data = INITIAL_DATA; for (i = 0; i < iterationTop; i++) { data = produce(data, draft => { for (x = 0; x < iterationBottom; x++) { const id = `${i}-${x}` draft.items[id] = { id: id, name: `NEW-ITEM${id}`, value: id } draft.count++ draft.keys.push(`NEW-ITEM${id}`) } }) }
immutable
let immData = Immutable.Record({ items: Immutable.Map({}), count: 0, keys: Immutable.List([]) })(); for (i = 0; i < iterationFull; i++) { immData = immData.update("items", (items) => { return items.set( i, Immutable.Record({ id: i, name: `NEW-ITEM${i}`, value: i })() ); }); immData = immData.set("count", immData.get("count") + 1); immData = immData.update("keys", (keys) => keys.push(`NEW-ITEM${i}`)); }
immutable balanced data change
let immData = Immutable.Record({ items: Immutable.Map({}), count: 0, keys: Immutable.List([]) })(); for (i = 0; i < iterationTop; i++) { immData = immData.update("items", (items) => { let immItems = items; for (x = 0; x < iterationBottom; x++) { const id = `${i}-${x}`; immItems = immItems.set( id, Immutable.Record({ id: id, name: `NEW-ITEM${id}`, value: id })() ); return immItems; } }); } for (i = 0; i < iterationFull; i++) { immData = immData.set("count", immData.get("count") + 1); immData = immData.update("keys", (keys) => keys.push(`NEW-ITEM${i}`)); }

Run results for: Immer & Immutable benchmarks with inceremntal data

immer many shorts updates

immer one big update

immer balanced data change

immutable

immutable balanced data change