Immutable Data and React

on YouTube ↗31m

" summary

Persistent immutable data structures power fast equality checks and memoization by returning new versions instead of mutating, implemented with structural sharing so most nodes are reused. The open source library Immutable.js provides lists, maps and ordered maps that plug into React and Flux, enabling cheap shouldComponentUpdate checks, simple undo via a history of versions, and a constant-factor performance cost (roughly 3–5× in some cases) in exchange for O(log n) or O(1) reconciliation benefits.

AI-written summary · about

" chapters (30)

1. 0:00Intro
2. 2:38Persistent Immutable Data Structures
3. 5:07Structural Sharing
4. 5:20Directed Acyclic Graph
5. 7:22reTrieve
6. 7:33Index Trie
7. 11:55Implementation as Trie, Interface as Lists and Maps!
8. 13:22The Hash Array Mapped Trie (HAMT) is based on the simple notion of hashing a key and storing the key in a trie based on this hash value.
9. 13:34Simplicity is hard work. But there's a huge payoff. The person who has a genuinely simpler system is going to be able to affect the greatest change with the least work. He's going to kick your ass.
10. 14:16What problems does this solve anyway?
11. 14:52Multithreading: There be dragons.
12. 15:30Embracing Immutability enables JavaScript's future.
13. 15:50Mutable objects complect Time and Value
14. 16:02var identity; identity = "value"; identity = "next value"
15. 16:40Immutable data removes complexity.
16. 16:56The Many Mutators Problem.
17. 17:46What changed?
18. 20:21Dirty bits
19. 21:11UI Framework coupling model class to view class.
20. 21:29Immutable change tracking
21. 23:08Memoization
22. 24:48shouldComponentUpdate()
23. 25:48Immutable Data is Faster
24. 25:59Reconciliation is pretty damn fast.
25. 26:43Flux stores contain mutable data.
26. 27:13Reconciliation is pretty damn fast?
27. 27:56Flux stores with immutable data!
28. 28:49Flux store is an identity New immutable values as time passes
29. 29:08Bonus: Undo is easy!
30. 30:29No more mutable state stockholm syndrome.

" related talks

• 45mJavaScript Immutability - "Don't Go Changing"Mark Volkmann · Jfokus 2016
• 33mImmutable data structures for functional JSAnjana Vakil · RuhrJS 2017
• 27mImmutable data structures for functional JSAnjana Vakil · JSConf EU 2017
• 19mImmutability is Changing: From Immutable.js to ImmerShawn Swyx Wang · ForwardJS 2019
• 34mFunctional Programming in JavaScriptAlejandro Gómez · JSDayES 2015
• 31mImmutable Application ArchitectureLee Byron · ReactEurope 2018
• 39mImmutable User InterfacesLee Byron · Full Stack Fest 2016
• 26mImmutability, interactivity & JavaScriptDavid Nolen · FutureJS 2014