The document discusses the concept of immutability in JavaScript, particularly in the context of using Immutable.js with React and Redux. It emphasizes the challenges of managing mutable state and presents various examples of both mutable and immutable data structures. The presentation concludes with guidelines on using Immutable.js effectively in React applications.

1. Immutability & Javascript
Nadia Miętkiewicz / Visuality

2. Why this talk?
● immutable.js is included by default in react-boilerplate
● that redux-form bug...

3. that redux-form bug
import React from 'react';
import { Field, reduxForm } from 'redux-form';
const Form = (props) => (
<form onSubmit={props.handleSubmit}>
<Field name="email" component="input" />
<button type="submit">Sign in</button>
</form>
);
export default reduxForm({
form: 'signIn',
})(Form);
import React from 'react';
import { Field, reduxForm } from 'redux-form/immutable';
const Form = (props) => (
<form onSubmit={props.handleSubmit}>
<Field name="email" component="input" />
<button type="submit">Sign in</button>
</form>
);
export default reduxForm({
form: 'signIn',
})(Form);

4. The case for immutability
Much of what makes application development difficult is
tracking mutation and maintaining state.

5. Muttable
const item = {
shape: 'square',
position: 'A',
};

6. Muttable
const item = {
shape: 'square',
position: 'A',
};
item.position = 'B';

7. Immuttable
const item = {
shape: 'square',
position: 'A',
};
const item2 = {
...item,
position: 'B',
};

8. Prestige (2006)
hughJackman.position = 'balcony';

9. Prestige (2006)
const hughJackmanClone = {
...hughJackman,
position: 'balcony',
};

10. Why not directly?

11. const item = {
shape: 'human',
position: 'A',
};
item.position = 'B';
Mutator methods

12. const item = {
shape: 'human',
position: 'A',
};
item.position = 'B';
Mutator methods
const item = {
shape: 'human',
position: 'A',
};
teleport(item, 'B');
function teleport(subject, position) {
subject.position = position;
}

13. Mutator methods
const item = {
shape: 'human',
position: 'A',
};
teleport(item, 'B');
function teleport(subject, position) {
/***********************************************/
YOLO
¯_(ツ)_/¯
/***********************************************/
}

14. The Fly (1986)
function teleport(subject, position) {
subject.position = position;
items = getCapsuleContents(); // should be [ ‘human’ ]
subject.shape = items.join();
}

15. The Fly (1986)
function teleport(subject, position) {
subject.position = position;
items = getCapsuleContents(); // is [ ‘human’, ‘fly’ ]
subject.shape = items.join();
}

16. What about memory
consumption?

17. Memory consumption
const item = {
shape: 'square',
position: 'A',
};
const item2 = {
...item,
position: 'B',
};

18. Memory consumption
const item = {
shape: 'square',
position: 'A',
};
const item2 = {
...item,
position: 'B',
};
const item3 = {
...item2,
position: 'C',
};
const item4 = {
...item,
position: 'D',
};
const item5 = {
...item,
position: 'E',
};
const item6 = {
...item2,
position: 'F',
};

19. Prestige (2016)
const hughJackmanClone = {
...hughJackmanOriginal,
position: 'balcony',
};
drown(hughJackmanOriginal);

20. Star Trek (1966 - 2005)

21. Persistent Data Structures

22. Structural Sharing

23. Structural Sharing

24. Structural Sharing

25. Structural Sharing

26. Immutable JS

27. Map
import { Map } from 'immutable';
const item = Map({
shape: 'square',
position: 'A',
});
const item2 = item.set('position', 'B');
const item = {
shape: 'square',
position: 'A',
};
item.position = 'B';

28. List
import { List } from 'immutable';
const items = List([
'apple',
'banana',
]);
const items2 = item.push('orange');
const items = [
'apple',
'banana',
];
items.push('orange');

29. make immutable
import { fromJS } from 'immutable';
const nested = fromJS({ a: { b: { c: [ 3, 4, 5 ] } } });
// Map { a: Map { b: Map { c: List [ 3, 4, 5 ] } } }

30. make mutable
import { Map, List } from 'immutable';
const deep = Map({ a: 1, b: 2, c: List([ 3, 4, 5 ]) });
console.log(deep.toObject()); // { a: 1, b: 2, c: List [ 3, 4, 5 ] }
console.log(deep.toArray()); // [ 1, 2, List [ 3, 4, 5 ] ]
console.log(deep.toJS()); // { a: 1, b: 2, c: [ 3, 4, 5 ] }

31. toJS() controversy

32. Debugging

33. Where to use?
● For the entire Redux state tree
● Your selectors should return Immutable.JS objects
● Never use toJS() in mapStateToProps
● Always in Smart Components (containers)
● Never in Dumb Components
● Wrap Dumb Components in a HOC to convert the props

34. Thank You!