This document discusses different options for managing immutable state in React applications: Redux requires immutable objects; Immutable.js uses immutable data structures but has some downsides; Immer allows mutating draft states and produces immutable outputs. It benchmarks adding and updating nodes in different libraries, finding native JavaScript fastest for small updates, Immutable.js best for large flat data, and Immer a readable middle ground, though slower when transpiled to ES5. The document recommends using a helper library like Immer for readable immutable state updates.

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

2. Simon Bächler
ti&m
@simonbaechler

3. The Flux Pattern

5. Redux
Immutable state

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

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

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

10. 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.

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

13. 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.

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

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

16. 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.

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

19. Code and
Performance

20. 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"
}
}
}
}
}

21. 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"
}))
})
}
}

22. 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"
}
})
}
}

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

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

25. Update a tree (1.2M nodes)

26. 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
}
}
}
}
}
}
}
}

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

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

29. Update a tree (1.2M nodes)
0
7.5
15
22.5
30
JS ImmutableJS Immer
t(ms)

30. Update a tree (1.2M nodes)
0
22.5
45
67.5
90
JS ImmutableJS Immer Immer ES5
t(ms)

31. Update a tree (1.2M nodes)

32. 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) => {
if (j !== selectId) {
return n
}
return {
...n,
children: n.children.map((n, j) => {
if (j !== selectId) {
return n
}
return {
...n,
children: n.children.map((n, j) => {
if (j !== selectId) {
return n
}
return {
...n,
children: n.children.map(
(n, j) => {
if (j !== selectId) {
return n
}
return {
...n,
children: n.children.map(
(n, j) => {
if (
j !==
selectId
) {
return n
}
return {
...n,
value:
n.value +
1

33. Update a tree (1.2M nodes)
state => {
for (let i = 0; i < 1000; i++) {
selectId = i % childrenCount
state = state.updateIn(
[
"children",
selectId,
"children",
selectId,
"children",
selectId,
"children",
selectId,
"children",
selectId,
"children",
selectId,
"value"
],
value => value + 1
)
}
}

34. Update a tree (1.2M nodes)
state => {
for (let i = 0; i < 1000; i++) {
selectId = i % childrenCount
state = produce(state, draft => {
draft
.children[selectId].children[selectId]
.children[selectId].children[selectId]
.children[selectId].children[selectId]
.value += 1
})
}
}

35. Update a tree (1.2M nodes)
0
5
10
15
20
25
30
35
40
JS ImmutableJS Immer
t(ms)

36. Update a tree (1.2M nodes)
0
30
60
90
120
150
JS ImmutableJS Immer Immer ES5
t(ms)

37. Summary

38. • 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.