Run results for: Immer (setAutoFreeze(false)) vs shallow vs ramda lens vs immutabe js vs immutable js (toJS) vs mutating 2.0

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36

Browser: Chrome 91

Operating system: Linux

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
immer	9636.4 Ops/sec
shallow copy	661564.3 Ops/sec
ramda lens	35960.0 Ops/sec
Immutable js test	374201.6 Ops/sec
immutable js (toJS)	9872.9 Ops/sec
mutate	1629743.8 Ops/sec

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/immer/8.0.1/immer.umd.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script>

Script Preparation code:

var { compose, over, set, lensPath, append } = R

var INITIAL_DATA = { items: {}, count: 0, keys: [] }

for (var index = 0; index < 100; index++) {
  INITIAL_DATA[index] = { id: index, name: `ITEM-${index}`, value: Math.random() }
  INITIAL_DATA.count++
  INITIAL_DATA.keys.push(index)
}

var mutable = INITIAL_DATA

var NEW_ITEM_ID = INITIAL_DATA.count +1

var produce = immer.default

var immutable = Immutable.fromJS(INITIAL_DATA)

Tests:

immer
data = produce(INITIAL_DATA, draft => { draft.items[NEW_ITEM_ID] = { id: NEW_ITEM_ID, name: 'ITEM-NEW', value: 0 } draft.counter++ draft.keys.push(NEW_ITEM_ID) })
shallow copy
data = { ...INITIAL_DATA, items: { ...INITIAL_DATA.items, [NEW_ITEM_ID]: { id: NEW_ITEM_ID, name: 'ITEM-NEW', value: 0 } }, count: INITIAL_DATA.count +1, keys: [ ...INITIAL_DATA.keys, NEW_ITEM_ID] }
ramda lens
data = compose( over(lensPath(["keys"]), append(NEW_ITEM_ID)), over(lensPath(["count"]), x => x + 1), set(lensPath(["items", NEW_ITEM_ID]), { id: NEW_ITEM_ID, name: "ITEM-NEW", value: 0 }) )(INITIAL_DATA);
Immutable js test
data = immutable.withMutations((state) => { state.update('items', items => items.set(NEW_ITEM_ID, { id: NEW_ITEM_ID, name: "ITEM-NEW", value: 0 })); state.set('count', INITIAL_DATA + 1); state.update('keys', keys => keys.push(NEW_ITEM_ID)); })
immutable js (toJS)
data = immutable.withMutations((state) => { state.update('items', items => items.set(NEW_ITEM_ID, { id: NEW_ITEM_ID, name: "ITEM-NEW", value: 0 })); state.set('count', INITIAL_DATA + 1); state.update('keys', keys => keys.push(NEW_ITEM_ID)); }) data.toJS()
mutate
mutable.items[NEW_ITEM_ID] = { id: NEW_ITEM_ID, name: 'ITEM-NEW', value: 0 } mutable.count = INITIAL_DATA.count +1 mutable.keys.push(NEW_ITEM_ID)

Run results for: Immer (setAutoFreeze(false)) vs shallow vs ramda lens vs immutabe js vs immutable js (toJS) vs mutating 2.0

immer

shallow copy

ramda lens

Immutable js test

immutable js (toJS)

mutate