SIGN IN SIGN UP
immerjs / immer UNCLAIMED

Create the next immutable state by mutating the current one

0 0 0 JavaScript
2018-04-09 10:57:39 -07:00
"use strict"
2018-07-25 12:03:58 +02:00
import {measure} from "./measure"
2018-04-09 10:57:39 -07:00
import produce, {setAutoFreeze, setUseProxies} from "../dist/immer.umd.js"
import cloneDeep from "lodash.clonedeep"
import * as Immutable from "immutable"
2018-07-25 13:26:22 +02:00
console.log("\n# incremental - lot of small incremental changes\n")
2018-04-09 10:57:39 -07:00
function createTestObject() {
return {
a: 1,
b: "Some data here"
}
}
const MAX = 1000
2018-07-25 12:03:58 +02:00
const baseState = {
ids: [],
map: Object.create(null)
}
2018-04-09 10:57:39 -07:00
2018-07-25 12:03:58 +02:00
let immutableJsBaseState
2018-04-09 10:57:39 -07:00
2018-07-25 12:03:58 +02:00
immutableJsBaseState = {
ids: Immutable.List(),
map: Immutable.Map()
}
2018-04-09 10:57:39 -07:00
2018-07-25 12:03:58 +02:00
measure(
"just mutate",
() => cloneDeep(baseState),
draft => {
for (let i = 0; i < MAX; i++) {
draft.ids.push(i)
draft.map[i] = createTestObject()
}
2018-04-09 10:57:39 -07:00
}
2018-07-25 12:03:58 +02:00
)
2018-04-09 10:57:39 -07:00
2018-07-25 12:03:58 +02:00
measure(
"handcrafted reducer",
2018-07-25 12:03:58 +02:00
() => cloneDeep(baseState),
state => {
2018-04-09 10:57:39 -07:00
for (let i = 0; i < MAX; i++) {
state = {
ids: [...state.ids, i],
map: {
...state.map,
[i]: createTestObject()
}
}
}
2018-07-25 12:03:58 +02:00
}
)
2018-04-09 10:57:39 -07:00
2018-07-25 12:03:58 +02:00
measure(
"immutableJS",
() => immutableJsBaseState,
state => {
2018-04-09 10:57:39 -07:00
for (let i = 0; i < MAX; i++) {
state = {
ids: state.ids.push(i),
map: state.map.set(i, createTestObject())
}
}
2018-07-25 12:03:58 +02:00
}
)
2018-04-09 10:57:39 -07:00
2018-07-25 12:03:58 +02:00
measure(
"immer (proxy)",
2018-07-25 12:03:58 +02:00
() => {
2018-04-09 10:57:39 -07:00
setUseProxies(true)
setAutoFreeze(false)
2018-07-25 12:03:58 +02:00
return baseState
},
state => {
for (let i = 0; i < MAX; i++) {
state = produce(state, draft => {
draft.ids.push(i)
draft.map[i] = createTestObject()
})
}
}
)
2018-04-09 10:57:39 -07:00
2018-07-25 12:03:58 +02:00
measure(
"immer (es5)",
2018-07-25 12:03:58 +02:00
() => {
setUseProxies(false)
setAutoFreeze(false)
return baseState
},
state => {
2018-04-09 10:57:39 -07:00
for (let i = 0; i < MAX; i++) {
state = produce(state, draft => {
draft.ids.push(i)
draft.map[i] = createTestObject()
})
}
2018-07-25 12:03:58 +02:00
}
)
measure(
"immer (proxy) - single produce",
() => {
setUseProxies(true)
setAutoFreeze(false)
return baseState
},
state => {
produce(state, draft => {
for (let i = 0; i < MAX; i++) {
draft.ids.push(i)
draft.map[i] = createTestObject()
}
})
}
)
measure(
"immer (es5) - single produce",
() => {
setUseProxies(false)
setAutoFreeze(false)
return baseState
},
state => {
produce(state, draft => {
for (let i = 0; i < MAX; i++) {
draft.ids.push(i)
draft.map[i] = createTestObject()
}
})
}
)