Immutable Libraries for React

Immutable Libraries
for React
Simon Bächler, ti&m

Simon Bächler
ti&m
@simonbaechler

Redux requires
• Immutable objects for state
• Pure functions for reducers and selectors.

With mutations
case ADD_VIDEO_TO_SERVICE:
state.profile.accounts[action.serviceId]
.videos[action.videoInfo.id] = action.videoInfo;
return state;

With Immer
return produce(state, draft => {
draft.profile.accounts[action.serviceId]
.videos[action.videoInfo.id] = action.videoInfo;
});

Immer
• By Michel Weststrate (Released January 2018)
• Producer function: mutable copy of the state.
• Simple API: Only one function:
produce<S>(currentState: S, draft: (S) => void): S
• Partial application is possible (by providing a function as the
first argument).
• Auto Freezing in Dev mode.
• Requires a Proxy-Polyfill für IE11.

With Immutable.js
return state.setIn(
['profile', 'accounts', action.serviceId, 'videos', action.videoInfo.id],
action.videoInfo
);

Immutable.js
• By Facebook
• Uses a tree data type: Well suited for very large states.
• Comes with its own API. e.g. getters for accessing properties.
• Many helper methods for the Collection type.
• Lazy sequences and Records
• Requires a browser extension for debugging.
• The main developer has left Facebook.
• Immutable structures should not be mixed with JS structures
• toJS() is an expensive operation.

Tries
• Prefix tree
• The path is the key
• The leaf is the value

Updating a value
• Change the value of
'tea'.

Updating a value
• A new tree is created
(clone the root node)
• Only the leaves in the
path are re-created
• The old tree is still
there as long as a
reference is pointing
at it.

https://medium.com/@dtinth/immutable-js-persistent-data-structures-and-structural-sharing-6d163fbd73d2

Adding nodes
state => {
for (let i = 0; i < 1000; i++) {
state = {
ids: [...state.ids, i],
map: {
...state.map,
[i]: {
a: 1,
b: "Some data here"
}
}
}
}
}

Adding nodes
state => {
for (let i = 0; i < 1000; i++) {
state = state.withMutations(draft => {
draft.update("ids", ids => ids.push(i))
draft.setIn(["map", i], Immutable.Map({
a: 1,
b: "Some data here"
}))
})
}
}

Adding nodes
state => {
for (let i = 0; i < 1000; i++) {
state = produce(state, draft => {
draft.ids.push(i)
draft.map[i] = {
a: 1,
b: "Some data here"
}
})
}
}

Update lists
0
40
80
120
160
JS ImmutableJS Immer
t(ms)

Update lists
0
300
600
900
1200
1500
JS ImmutableJS Immer Immer ES5
t(ms)

Update a tree (1.2M nodes)
state => {
for (let i = 0; i < 1000; i++) {
k = getKey(i);
state = {
...state,
[k]: {
...state[k],
[k]: {
...state[k][k],
[k]: {
...state[k][k][k],
[k]: {
...state[k][k][k][k],
[k]: {
...state[k][k][k][k][k],
[k]: {
...state[k][k][k][k][k][k],
[k]: i
}
}
}
}
}
}
}
}

state => {
for (let i = 0; i < 1000; i++) {
k = getKey(i);
state = state.setIn([k, k, k, k, k, k, k], i)
}
}

state => {
for (let i = 0; i < 1000; i++) {
k = getKey(i);
draft[k][k][k][k][k][k][k] = i
})
}
}

0
7.5
15
22.5
30
t(ms)

0
22.5
45
67.5
90
t(ms)

state => {
for (let i = 0; i < 1000; i++) {
selectId = i % childrenCount
state = {
...state,
children: state.children.map((n, j) => {
if (j !== selectId) {
return n
}
return {
...n,
children: n.children.map((n, j) => {
return n
}
return {
...n,
return n
}
return {
...n,
return n
}
return {
...n,
children: n.children.map(
(n, j) => {
return n
}
return {
...n,
children: n.children.map(
(n, j) => {
if (
j !==
selectId
) {
return n
}
return {
...n,
value:
n.value +
1

state => {
for (let i = 0; i < 1000; i++) {
state = state.updateIn(
[
"children",
selectId,
"children",
selectId,
"children",
selectId,
"children",
selectId,
"children",
selectId,
"children",
selectId,
"value"
],
value => value + 1
)
}
}

state => {
for (let i = 0; i < 1000; i++) {
draft
.children[selectId].children[selectId]
.value += 1
})
}
}

0
5
10
15
20
25
30
35
40
t(ms)

0
30
60
90
120
150
t(ms)

• Use a helper library for updating immutable state.
• Native JS is really fast on small and nested structures.
• Immutable.js shines on large, flat data structures but
comes with some downsides (API, overhead, deep
integration)
• Immer makes your code more readable and is about 2x
slower in ES6, but massively slower when transpiled to
ES5.

Immutable Libraries for React

More Related Content

What's hot (20)

Similar to Immutable Libraries for React (20)

More from stbaechler (8)

Recently uploaded (20)

Immutable Libraries for React

Editor's Notes