ReactJS Boston: Values and Equality in Immutable.js

Exploring the what and how of equality of Immutable collections in JavaScript.

Presented on May 25th, 2016 at the ReactJS Boston Meetup.
http://www.meetup.com/ReactJS-Boston/events/230994535/

Transcript

1. Values & Equality in
2. Immutable Data & React The Value of Values
3. Rundown • Types of equality • Equality in Immutable • Hashing
4. Types of equality
5. Numbers
6. 1 === 1 Numbers have value equality
7. 1 Numbers are portable & reproducible
8. 1 pizza 2 toppings 8 slices Numbers are generic
9. (1 + 1) === 2 (3 - 1) === 2 (2 * 1) === 2 (2 / 1) === 2 Numbers can express new numbers immutably
10. Arrays
11. [1, 2, 3] !== [1, 2, 3] Arrays have reference equality
12. [1, 2, 3] Arrays are portable & reproducible
13. [ [1, ”pizza”], [2, ”toppings”], [8, “slices”], ] Arrays are generic
14. oneTwoThree = [1, 2, 3] oneTwoThree.push(4) Arrays can express new arrays… but not immutably
16. Lists
17. List have value equality… is( List.of(1, 2, 3), List.of(1, 2, 3) )
18. List.of(1, 2, 3) List are portable & reproducible
19. List.of( List.of(1, “pizza”), List.of(2, “toppings”), List.of(8, “slices”) ) Lists are generic
20. ofThree = List.of(1,2,3) ofFour = ofThree.push(4) is( ofThree, List.of(1, 2, 3) ) Lists can express new Lists… immutably!
21. Numbers Arrays Lists Portable ✔ ✔ ✔ Generic ✔ ✔ ✔ Immutable ✔ ✔ Types of equality
22. Immutable equality
23. List.of(1,2,3) !== List.of(1,2,3) JavaScript only compares our references
24. Immutable.is( List.of(1,2,3), List.of(1,2,3) ) Immutable has its own equality operator
25. for (i = 0; i < size; i++) { if (!is(a[i], b[i])) { return false; } } return true;
26. _.isEqual( [1,2,3], [1,2,3] ) So what’s the advantage?
27. circular = [] circular[0] = circular JavaScript allows circular references
30. list = List() circular = list.set(0, list) !is(list, circular) Immutable does not allow circular references
31. Immutable equality
32. Hashing
33. JSON.stringify([1,2,3]) Other operations are affected by circular references…
34. l = List.of(1,2,3) l.hashCode() === -636912971
35. one = List.of(1) m = Map().set(one, 12345) m.get(List.of(1)) === 12345 Anything (hashable) can be a key!
36. const memoize = (op) => { let cache = Map(); return (key) => { if (!cache.has(key)) { cache = cache.set(key, op(key));
 } return cache.get(key); }; }
37. const memoFib = memoize(fib) // does work memoFib(25) === 75025 // cached result memoFib(25) === 75025
38. const memoFetch = memoize(fetch) // does work const apiPromise = memoFetch(Map({ id: 5678, page: 4, })); // cached result memoFetch(Map({ id: 5678, page: 4, })) === apiPromise
39. behave like values no circular references hashable can be keys in Maps powerful memoization
40. thanks • http://facebook.github.io/immutable-js/ • https://www.infoq.com/presentations/Value-Values • https://www.youtube.com/watch?v=I7IdS-PbEgI • https://twitter.com/colbyrabideau