This document discusses the problems with mutable state and how immutability can help address those problems. It provides examples of code using mutable state that can have unintended consequences when the state is changed. The document then shows ways to fix the code examples by using immutable data structures from Immutable.js which avoid mutations and instead create new immutable objects when data changes. It briefly introduces directed acyclic graphs (DAGs) and how immutable data structures use them to efficiently handle updates without mutations.

1. Immutability

2. Problem
* Mutable State *

3. credit: http://www.memecreator.org/

4. What is Wrong with Mutable State ?
var dataStore = { key: "value", ... };
renderUI(dataStore);
loadDataIntoStore(url, () => {
renderUI(dataStore);
});

5. Notice about the Changes ?
var dataStore = { key: "value", ... };
renderUI(dataStore);
loadDataIntoStore(url, () => {
renderUI(dataStore);
});
We never notice how loadDataIntoStore change
our dataStore, thus, we should re - render
the UI again.

6. Consider this Code
var a = {message: ‘Hello’};
var b = {message: ‘Hello’};
console.log(a === b); // false
var a = {message: ‘Hi’};
b = a;
b.message = ‘Hello’;
console.log(a === b); // true

7. Mutable State Master
Race
Let the data is mutating along the
system is live.

8. “HISTORY”

9. Credit: The Joy Of Clojure ( e - Book )

10. Fix Code {1}
var dataStore = { key: "value", ... };
renderUI(dataStore);
Object.observe(dataStore, changes => {
renderUI(dataStore, changes);
});
loadDataIntoStore(url);

11. Fix Code {2}
var data = {
dirty: false,
_raw: { key: “false” },
get: function(key) {
return this._raw[key];
},
set: function(key, newValue) {
this._raw[key] = newValue;
this.dirty = true;
}
};
function renderUI(data) {
if (!data.dirty) return;
data.dirty = false;
}

12. “We have to differentiate something which
Complex and Complicated”

13. “Immutability comes to removes Complicated
Code”

14. Fix Code with Immutable.js
var dataStore = { key: "value", ... };
<script src="immutable.min.js"></script>
<script>
var map1 = Immutable.Map({a:1, b:2, c:3});
var map2 = map1.set('b', 4);
console.log(map1 === map2);
</script>

15. Immutable in Depth
What makes immutable data
Immutable

16. DAG ( Directed Acyclic Graph )
Update Process on Persistent Immutable Data Structures