Inside Fiber: the in-depth overview you wanted a TLDR for

At the core of React.js, lies reconciliation; the mechanism that tracks changes in a component state and projects the updated state to the screen. Starting from version 16, the core team rolled out a new implementation of that internal instances tree (components, DOM nodes, etc.) and the algorithm that manages it code-named Fiber.

In this talk, I want to provide an in-depth overview of important concepts and relevant data structures. We'll then explore how React uses the algorithm to perform initial render and process updates and a few details of the scheduler, the child reconciliation process, and the mechanism of building an effects list.

Last but not least, we'll go through a few magic words we hear a lot, like coroutines, continuations, fibers, threads, generators, and algebraic effects and see how they all relate to React.js itself.

Transcript

1. FIBER TLDR f by Mathe Albuquрque <ythecombinator> ide the -depth рview y w ted a
2. Goals 2
3. 1 CLARIFY A BIT ABOUT WHAT HAPPENS UNDER OUR REACT COMPONENTS 3 3 GOALS
4. 2 INTRODUCE YOU TO SOME CS CONCEPTS WE USUALLY FACE WHEN READING REACT.JS DISCUSSION THREADS ON TWITTER AND GITHUB 4 4 GOALS
5. Disclaimers 5
6. 1 REACT SOURCE CODE IS NOT EASY TO READ; IT IS CONSTANTLY CHANGING, AND SOME THOUGHTS ARE SPECULATIVE 6 6 DISCLAIMERS
7. 1 REACT SOURCE CODE IS NOT EASY TO READ; IT IS CONSTANTLY CHANGING, AND SOME THOUGHTS ARE SPECULATIVE 7 7 DISCLAIMERS REACT SOURCE BE LIKE
8. 2 MAYBE THIS TALK WON’T BE 100% WHAT YOU’D CALL A TLDR 8 8 DISCLAIMERS
9. Some Context 9
10. 10 10
11. 11 11 HTTPS://GITHUB.COM/MACABEUS/JS-PROPOSAL-ALGEBRAIC-EFFECTS
12. 12 12 CONTINUATIONS ALGEBRAIC EFFECTS COROUTINES FIBERS THREADS GENERATORS
13. 13 13 CONTINUATIONS ALGEBRAIC EFFECTS COROUTINES FIBERS THREADS GENERATORS
14. Agenda 14
15. ↝ FIBER(S) ↝ COROUTINES ↝ CONTINUATIONS ↝ EFFECT HANDLERS ↝ CONCLUSIONS 15 15 AGENDA
16. Fiber 16
17. OVERVIEW 17
18. 18 18
19. 19 19 HTTPS://YOUTU.BE/ZCUYPIUIONS
20. BRIEFLY, IT'S A REWRITE OF REACT’S CORE RECONCILIATION ALGORITHM TO PROVIDE GREATER CONTROL OVER THE RENDER CYCLE 20 20 FIBER • OVERVIEW
21. THE FIBER ARCHITECTURE IS A REACT- SPECIFIC IMPLEMENTATION OF A CALL- STACK-LIKE MODEL WHERE REACT HAS FULL CONTROL OF SCHEDULING WHAT SHOULD BE DONE 21 21 FIBER • OVERVIEW
22. THE FIBER ARCHITECTURE IS A REACT- SPECIFIC IMPLEMENTATION OF A CALL- STACK-LIKE MODEL WHERE REACT HAS FULL CONTROL OF SCHEDULING WHAT SHOULD BE DONE 22 22 FIBER • OVERVIEW AND A FIBER ITSELF COULD BE SEEN AS A STACK FRAME FOR A REACT COMPONENT
23. 23 23 function add(x,y) { const result = x + y; return result; } add(2, 2) FIBER • OVERVIEW
24. 24 24 FIBER • OVERVIEW
25. 25 25 FIBER • OVERVIEW
26. 26 26 FIBER • OVERVIEW
27. 27 27 FIBER • OVERVIEW
28. 28 28 FIBER • OVERVIEW
29. 29 29 FIBER • OVERVIEW
30. ITS EXCITING FEATURES DEPEND MOSTLY ON THE ABILITY TO PAUSE AND RESUME IN THE MIDDLE OF A RENDER CYCLE. 30 30 FIBER • OVERVIEW
31. SOME OF THOSE FEATURES ARE: ↝ ERROR BOUNDARIES ↝ SUSPENSE ↝ TIME SLICING 31 31 FIBER • OVERVIEW
32. 32 32
33. 33 33 HTTPS://YOUTU.BE/NLF0N9SACD4
34. ELEMENTS AND NODES 34
35. 35 35
36. ONCE A TEMPLATE GOES THROUGH THE JSX COMPILER, YOU END UP WITH A BUNCH OF REACT ELEMENTS. 36 36 FIBER • ELEMENTS AND NODES
37. 37 37
38. THIS IS WHAT’S REALLY RETURNED FROM THE RENDER METHOD OF REACT COMPONENTS, NOT HTML. 38 38 FIBER • ELEMENTS AND NODES
39. REACT ADDS THE PROPERTY $$TYPEOF TO THESE OBJECTS TO UNIQUELY IDENTIFY THEM AS REACT ELEMENTS. THEN WE HAVE PROPERTIES TYPE, KEY AND PROPS THAT DESCRIBE THE ELEMENT. 39 39 FIBER • ELEMENTS AND NODES
40. DURING RECONCILIATION DATA FROM EVERY REACT ELEMENT RETURNED FROM THE RENDER METHOD IS MERGED INTO THE TREE OF FIBER NODES. 40 40 FIBER • ELEMENTS AND NODES
41. DURING RECONCILIATION DATA FROM EVERY REACT ELEMENT RETURNED FROM THE RENDER METHOD IS MERGED INTO THE TREE OF FIBER NODES. 41 41 FIBER • ELEMENTS AND NODES DEPENDING ON THE TYPE OF A REACT ELEMENT THE FRAMEWORK NEEDS TO PERFORM DIFFERENT ACTIVITIES.
42. DURING RECONCILIATION DATA FROM EVERY REACT ELEMENT RETURNED FROM THE RENDER METHOD IS MERGED INTO THE TREE OF FIBER NODES. 42 42 FIBER • ELEMENTS AND NODES DEPENDING ON THE TYPE OF A REACT ELEMENT THE FRAMEWORK NEEDS TO PERFORM DIFFERENT ACTIVITIES. EACH ELEMENT IS CONVERTED INTO A FIBER NODE THAT DESCRIBES THE WORK THAT NEEDS TO BE DONE.
43. YOU CAN THINK OF A FIBER AS A DATA STRUCTURE THAT REPRESENTS A UNIT OF WORK. 43 43 FIBER • ELEMENTS AND NODES
44. 44 44 FIBER • ELEMENTS AND NODES YOU CAN THINK OF A FIBER AS A DATA STRUCTURE THAT REPRESENTS A UNIT OF WORK. AND THAT MAKES IT A CONVENIENT WAY TO TRACK, SCHEDULE, PAUSE AND ABORT THE WORK.
45. 45 45
46. 46 46
47. 47 47 HostRoot App div Header img Display div Control div Control div CHILD RETURN SIBLING
48. CURRENT TREE 48 48 FIBER • ELEMENTS AND NODES WORK IN PROGRESS TREE
49. CURRENT TREE 49 49 FIBER • ELEMENTS AND NODES REFLECTS THE STATE OF THE APPLICATION THAT WAS USED TO RENDER THE UI.
50. WORK IN PROGRESS TREE 50 50 FIBER • ELEMENTS AND NODES REFLECTS THE FUTURE STATE TO BE FLUSHED TO THE SCREEN.
51. CURRENT TREE 51 51 FIBER • ELEMENTS AND NODES WORK IN PROGRESS TREE REACT ALWAYS UPDATES THE DOM IN ONE GO — IT DOESN’T SHOW PARTIAL RESULTS.
52. SIDE EFFECTS 52
53. A COMPONENT IS A FUNCTION THAT USES THE STATE AND PROPS TO COMPUTE THE UI. EVERY OTHER ACTIVITY SHOULD BE CONSIDERED A SIDE-EFFECT. 53 53 FIBER • SIDE EFFECTS
54. SINCE APPLYING EFFECTS IS A TYPE OF WORK, A FIBER NODE IS A CONVENIENT MECHANISM TO TRACK EFFECTS IN ADDITION TO UPDATES. 54 54 FIBER • SIDE EFFECTS
55. REACT PROCESSES UPDATES VERY QUICKLY. ONE OF THE TECHNIQUES IT USES IS BUILDING A LINEAR LIST OF FIBER NODES WITH EFFECTS FOR QUICK ITERATION. 55 55 FIBER • SIDE EFFECTS
56. NODE STRUCTURE 56
57. EVERY REACT APPLICATION HAS ONE OR MORE DOM ELEMENTS THAT ACT AS CONTAINERS. REACT CREATES A FIBER ROOT OBJECT FOR EACH OF THOSE CONTAINERS. 57 57 FIBER • NODE STRUCTURE
58. 58 58
59. 59 59
60. 60 60 TAG DEFINES THE TYPE OF THE FIBER. IT’S USED DURING RECONCILIATION TO DETERMINE WHAT WORK NEEDS TO BE DONE.
61. 61 61
62. 62 62
63. 63 63
64. 64 64 KEY UNIQUE IDENTIFIER WITH A GROUP OF CHILDREN TO HELP REACT FIGURE OUT WHICH ITEMS HAVE CHANGED, HAVE BEEN ADDED OR REMOVED FROM THE LIST.
65. 65 65 UPDATEQUEUE A QUEUE OF STATE UPDATES, CALLBACKS AND DOM UPDATES.
66. 66 66 MEMOIZEDSTATE STATE OF THE FIBER THAT WAS USED TO CREATE THE OUTPUT.
67. 67 67 MEMOIZEDPROPS PROPS OF THE FIBER THAT WERE USED TO CREATE THE OUTPUT DURING THE PREVIOUS RENDER.
68. 68 68 PENDINGPROPS PROPS THAT HAVE BEEN UPDATED FROM NEW DATA IN REACT ELEMENTS AND NEED TO BE APPLIED TO CHILD COMPONENTS OR DOM ELEMENTS.
69. ALGORITHM PHASES 69
70. REACT PERFORMS WORK IN TWO MAIN PHASES: RENDER AND COMMIT. 70 70 FIBER • ALGORITHM PHASES
71. !!! 71 71 FIBER • ALGORITHM PHASES
72. 72 72 FIBER • ALGORITHM PHASES constructor componentWillMount Mounting componentWillReceiveProps New Props setState() shouldComponentUpdate componentWillUpdate Updating Unmounting render componentDidMount componentDidUpdate componentWillUnmount
73. 73 73 FIBER • ALGORITHM PHASES constructor getDerivedStateFromProps Mounting New Props setState() shouldComponentUpdate getSnapshotBeforeUpdate Updating Unmounting render componentDidMount componentDidUpdate componentWillUnmount
74. THE ORIGINAL LIFECYCLE MODEL WAS NOT INTENDED FOR SOME OF THE UPCOMING FEATURES LIKE ASYNC RENDERING. 74 74 FIBER • ALGORITHM PHASES
75. THE ORIGINAL LIFECYCLE MODEL WAS NOT INTENDED FOR SOME OF THE UPCOMING FEATURES LIKE ASYNC RENDERING. 75 75 FIBER • ALGORITHM PHASES CALLS FROM COMPONENTWILLRECEIVE PROPS THAT CHANGE THE STORE
76. THE ORIGINAL LIFECYCLE MODEL WAS NOT INTENDED FOR SOME OF THE UPCOMING FEATURES LIKE ASYNC RENDERING. 76 76 FIBER • ALGORITHM PHASES CALLING SETSTATE IN COMPONENTWILLUPDATE WILL TRIGGER SHOULDCOMPONENTUPDATE
77. WHAT NOW? getDerivedStateFromProps() getSnapshotBeforeUpdate() 77 77 FIBER • ALGORITHM PHASES
78. 78 78 FIBER • ALGORITHM PHASES • getDerivedStateFromProps() static getDerivedStateFromProps(props, state) { if (state.value !!" props.value) { return { derivedValue: deriveValueFromProps(props), mirroredProp: props.value } } return null; }
79. ↝ IT'S A PURE FUNCTION ↝ EXPECTED TO RETURN AN OBJECT TO UPDATE THE STATE OF THE COMPONENT ↝ IF NULL IS RETURNED THEN, NOTHING IS CHANGED IN THE STATE ↝ A SAFER REPLACEMENT OF componentWillReceiveProps() 79 79 FIBER • ALGORITHM PHASES • getDerivedStateFromProps()
80. 80 80 FIBER • ALGORITHM PHASES • getSnapshotBeforeUpdate() getSnapshotBeforeUpdate(prevProps, prevState) { if (prevProps.list.length < this.props.list.length) { return this.listRef.value.scrollHeight; } return null; }
81. ↝ GETS CALLED AFTER THE RENDER CREATED THE REACT ELEMENT AND BEFORE IT IS ACTUALLY UPDATED FROM VIRTUAL DOM TO ACTUAL DOM ↝ IT'S USEFUL IF YOU WANT TO KEEP SYNC IN-BETWEEN STATE OF CURRENT DOM WITH THE UPDATED DOM ↝ A SAFER REPLACEMENT OF componentWillUpdate() 81 81 FIBER • ALGORITHM PHASES • getSnapshotBeforeUpdate()
82. APPLIES SCHEDULED UPDATES TO COMPONENTS AND FIGURES OUT WHAT NEEDS TO BE UPDATED IN THE UI. 82 82 FIBER • ALGORITHM PHASES • RENDER PHASE
83. APPLIES SCHEDULED UPDATES TO COMPONENTS AND FIGURES OUT WHAT NEEDS TO BE UPDATED IN THE UI. 83 83 FIBER • ALGORITHM PHASES • RENDER PHASE THE RESULT OF THE PHASE IS A TREE OF FIBER NODES MARKED WITH SIDE- EFFECTS.
84. APPLIES SCHEDULED UPDATES TO COMPONENTS AND FIGURES OUT WHAT NEEDS TO BE UPDATED IN THE UI. 84 84 FIBER • ALGORITHM PHASES • RENDER PHASE THE RESULT OF THE PHASE IS A TREE OF FIBER NODES MARKED WITH SIDE- EFFECTS. WORK DURING THIS PHASE CAN BE PERFORMED ASYNCHRONOUSLY.
85. APPLIES SCHEDULED UPDATES TO COMPONENTS AND FIGURES OUT WHAT NEEDS TO BE UPDATED IN THE UI. 85 85 FIBER • ALGORITHM PHASES • RENDER PHASE THE RESULT OF THE PHASE IS A TREE OF FIBER NODES MARKED WITH SIDE- EFFECTS. WORK DURING THIS PHASE CAN BE PERFORMED ASYNCHRONOUSLY. ASYNCHRONOUSLY
86. ↝ [UNSAFE_]componentWillMount ↝ [UNSAFE_]componentWillReceiveProps ↝ getDerivedStateFromProps ↝ shouldComponentUpdate ↝ [UNSAFE_]componentWillUpdate ↝ render 86 86 FIBER • ALGORITHM PHASES • RENDER PHASE
87. WHEN REACT GETS TO THIS PHASE, IT HAS TWO TREES AND THE EFFECTS LIST. 87 87 FIBER • ALGORITHM PHASES • COMMIT PHASE
88. ↝ CALLS THE getSnapshotBeforeUpdate LIFECYCLE METHOD ON NODES TAGGED WITH THE SNAPSHOT EFFECT ↝ CALLS THE componentWillUnmount LIFECYCLE METHOD ON NODES TAGGED WITH THE DELETION EFFECT ↝ PERFORMS ALL THE DOM INSERTIONS, UPDATES AND DELETIONS ↝ SETS THE FINISHEDWORK TREE AS CURRENT 88 88 FIBER • ALGORITHM PHASES • COMMIT PHASE
89. ↝ CALLS componentDidMount() LIFECYCLE METHOD ON NODES TAGGED WITH THE PLACEMENT EFFECT ↝ CALLS componentDidUpdate() LIFECYCLE METHOD ON NODES TAGGED WITH THE UPDATE EFFECT 89 89 FIBER • ALGORITHM PHASES • COMMIT PHASE
90. IN COMPUTER SCIENCE 90
91. A FIBER IS A GENERIC MODEL OF EXECUTION WHERE EACH UNIT WORKS TOGETHER COOPERATIVELY 91 91 FIBER • IN COMPUTER SCIENCE
92. FIBERS ARE USED IN SYSTEMS LIKE WINDOWS AND OCALM PROGRAMMING LANGUAGE 92 92 FIBER • IN COMPUTER SCIENCE
93. Coroutines 93
94. OVERVIEW 94
95. 95 95 COROUTINES • OVERVIEW
96. 96 96 COROUTINES • OVERVIEW
97. 1 A GENERATOR (PRODUCER) THAT CAN ALSO CONSUME VALUES. 97 97 COROUTINES • OVERVIEW
98. 1 A GENERATOR (PRODUCER) THAT CAN ALSO CONSUME VALUES. JAVASCRIPT GENERATORS CAN CONSUME VALUES THROUGH .next() AND SO BY THIS DEFINITION ARE COROUTINES. 98 98 COROUTINES • OVERVIEW
99. 2 A GENERATOR THAT CAN RESOLVE ASYNCHRONOUS VALUES, LIKE ASYNC/ AWAIT. 99 99 COROUTINES • OVERVIEW
100. 2 A GENERATOR THAT CAN RESOLVE ASYNCHRONOUS VALUES, LIKE ASYNC/ AWAIT. THIS MEANING IS THE MOST COMMON MEANING OF “COROUTINE” IN THE JAVASCRIPT WORLD. 100 100 COROUTINES • OVERVIEW
101. 3 A GENERATOR THAT CAN YIELD WITH A STACKFUL CONTINUATION. 101 101 COROUTINES • OVERVIEW
102. 3 A GENERATOR THAT CAN YIELD WITH A STACKFUL CONTINUATION DEEP AWAIT. 102 102 COROUTINES • OVERVIEW
103. 3 A GENERATOR THAT CAN YIELD WITH A STACKFUL CONTINUATION. WITH REACT SUSPENSE WE CAN PAUSE RECONCILIATION AT ANY DEPTH. 103 103 COROUTINES • OVERVIEW
104. 3 A GENERATOR THAT CAN YIELD WITH A STACKFUL CONTINUATION. 104 104 COROUTINES • OVERVIEW THAT MIGHT BE WHAT ANDREW MEANT IN HIS TWEET.
105. 105 105 COROUTINES • OVERVIEW CONTROL IS PASSED TO THE CALLER AND HANDLED BY APPLICATION CODE COROUTINES WHEN YIELDING…
106. 106 106 COROUTINES • OVERVIEW CONTROL IS PASSED TO THE CALLER AND HANDLED BY APPLICATION CODE COROUTINES CONTROL IS PASSED TO A SCHEDULER WHICH DETERMINES WHAT TO RUN NEXT FIBERS WHEN YIELDING… WHEN YIELDING…
107. 107 107 COROUTINES • OVERVIEW WHEN YIELDING… CONTROL IS PASSED TO THE CALLER AND HANDLED BY APPLICATION CODE COROUTINES CONTROL IS PASSED TO A SCHEDULER WHICH DETERMINES WHAT TO RUN NEXT. CONTROLLED AT THE LEVEL OF THE OPERATING SYSTEM OR FRAMEWORK. FIBERS
108. COROUTINES IN REACT 108
109. COROUTINES APPEARED WHEN WORK ON FIBER WAS FIRST GETTING GOING AS A SPECIFIC COMPONENT TYPE. 109 109 COROUTINES • IN REACT
110. 110 110
111. 111 111
112. THE IDEA BEHIND COROUTINES — AS OPPOSED TO FIBERS — WAS TO GIVE COMPONENTS EXPLICIT CONTROL OVER YIELDING AND RESUMPTION. 112 112 COROUTINES • IN REACT
113. COROUTINES IN REACT NO LONGER EXIST. 113 113 COROUTINES • IN REACT
114. COROUTINES IN REACT NO LONGER EXIST. 
 IT WILL BE FASCINATING TO SEE WHAT FORM COROUTINES TAKE WHEN THEY RETURN TO REACT FIBER. 114 114 COROUTINES • IN REACT IT WILL BE FASCINATING TO SEE WHAT FORM COROUTINES TAKE WHEN THEY RETURN TO REACT FIBER.
115. Continuations 115
116. OVERVIEW 116
117. 117 117
118. AN ABSTRACTION THAT REPRESENTS THE REMAINING STEPS IN A COMPUTATION. 118 118 CONTINUATIONS • OVERVIEW
119. AN ABSTRACTION THAT REPRESENTS THE REMAINING STEPS IN A COMPUTATION. 119 119 A CONTINUATION IS A CONTROL FLOW PRIMITIVE. CONTINUATIONS • OVERVIEW
120. CONTINUATIONS IN REACT 120
121. 121 121
122. 122 122 HTTPS://GITHUB.COM/REACTJS/REACT-BASIC#CONTINUATIONS
123. 123 123
124. 124 124 HTTPS://GITHUB.COM/FACEBOOK/REACT/PULL/13595
125. FOR ANDREW CLARK, “A CONTINUATION IS A CALLBACK THAT IS SCHEDULED WHEN YIELDING EXECUTION” 125 125 CONTINUATIONS • IN REACT
126. 126 126 CONTINUATIONS • IN REACT function performWork(deadline) { while (tasks.length > 0) { const task = tasks.shift(); doTask(task); if ( tasks.length > 0 && !deadline.didTimeout && deadline.timeRemaining() <= 0 ) { return performWork; } } } scheduleWork(performWork);
127. SO A CONTINUATION MIGHT BE A PARTICULAR CHILD FIBER, WHETHER HANDLED BY THE FRAMEWORK OR THE USER, OR A CALLBACK TO BEGIN PROCESSING THAT CHILD. 127 127 CONTINUATIONS • IN REACT
128. SO A CONTINUATION MIGHT BE A PARTICULAR CHILD FIBER, WHETHER HANDLED BY THE FRAMEWORK OR THE USER, OR A CALLBACK TO BEGIN PROCESSING THAT CHILD. 128 128 CONTINUATIONS • IN REACT
129. Effect Handlers 129
130. OVERVIEW 130
131. EFFECTS ASK THE CALLING ENVIRONMENT TO HANDLE A PARTICULAR TASK, LIKE LOGGING, READING FROM DATABASE, MUTATING SOME GLOBAL STATE. 131 131 EFFECT HANDLERS • OVERVIEW
132. WHEN AN EFFECT IS USED, THE NEAREST EFFECT HANDLER IS CALLED, WHICH ALLOWS YOU TO RUN CODE IN RESPONSE TO THE EFFECT AND RETURN SOME VALUE. 132 132 EFFECT HANDLERS • OVERVIEW
133. 133 133
134. 134 134 HTTPS://OVERREACTED.IO/ALGEBRAIC-EFFECTS-FOR-THE-REST-OF-US
135. 135 135 EFFECT HANDLERS • OVERVIEW function getName(user) { let name = user.name; if (name === null) { name = perform 'ask_name'; } return name; } const arya = { name: null, friendNames: [] }; const gendry = { name: 'Gendry', friendNames: [] }; try { getName(arya); } handle (effect) { if (effect === 'ask_name') { resume with 'Arya Stark'; } }
136. 136 136 EFFECT HANDLERS • OVERVIEW function getName(user) { let name = user.name; if (name === null) { name = perform 'ask_name'; } return name; } const arya = { name: null, friendNames: [] }; const gendry = { name: 'Gendry', friendNames: [] }; try { getName(arya); } handle (effect) { if (effect === 'ask_name') { resume with 'Arya Stark'; } } throw ↝ perform catch ↝ handle lets us jump back to where we performed the effect
137. EFFECT HANDLERS IN REACT 137
138. 138 138
139. 139 139 THE REACT TEAM APPARENTLY SPENT SOME TIME EXPERIMENTING WITH USING EFFECT-HANDLER CONTROL STRUCTURES FOR MANAGING LAYOUT
140. 140 140
141. 141 141 AND ALSO FOR IMPLEMENTING THE CONTEXT API
142. 142 142
143. 143 143 SEBASTIAN POINTS THAT “CONCEPTUALLY, THEY [HOOKS] ARE ALGEBRAIC EFFECTS”.
144. !!! 144 144 EFFECT HANDLERS • IN REACT
145. 145 145
146. 146 146 A COMPONENT IS ABLE TO SUSPEND THE FIBER IT IS RUNNING IN BY THROWING A PROMISE, WHICH IS CAUGHT AND HANDLED BY THE FRAMEWORK.
147. 147 147 WHEN THE PROMISE RESOLVES, ITS VALUE IS ADDED TO A CACHE, THE FIBER IS RESTARTED, AND THE NEXT TIME THE DATA IS REQUESTED IT IS ACCESSED SYNCHRONOUSLY FROM CACHE.
148. 148 148 THROW-HANDLE-RESUME PATTERN.
149. 149 149 SINCE REACT USES FIBERS INSTEAD OF NATIVE CALL STACK, IT CAN USE THROW TO INTERRUPT RENDERING WITH MINIMAL OVERHEAD.
150. Conclusions 150
151. 1 I AM NOT QUITE SURE ABOUT TC39 APPROVAL BECAUSE: ↝ DIFFICULT TO OPTIMIZE ↝ AFFECTS CODE THAT DOESN'T USE THE FUNCTIONALITY 151 151 CONCLUSIONS
152. 2 152 152 CONCLUSIONS REACT FIBER WAS A REWRITE OF REACT FOCUSED ON GIVING MORE LOW-LEVEL CONTROL OVER PROGRAM EXECUTION
153. 2 153 153 CONCLUSIONS REACT FIBER WAS A REWRITE OF REACT FOCUSED ON GIVING MORE LOW-LEVEL CONTROL OVER PROGRAM EXECUTION FIBERS/COROUTINES AS LOW-LEVEL COOPERATIVE WAYS TO MODEL PROGRAM EXECUTION
154. 2 154 154 CONCLUSIONS REACT FIBER WAS A REWRITE OF REACT FOCUSED ON GIVING MORE LOW-LEVEL CONTROL OVER PROGRAM EXECUTION FIBERS/COROUTINES AS LOW-LEVEL COOPERATIVE WAYS TO MODEL PROGRAM EXECUTION ALGEBRAIC EFFECTS AS A WAY TO HANDLE EFFECTS WHERE EFFECTS AND THEIR BEHAVIOUR ARE INDEPENDENT
155. 3 REACT TRIES TO OVERCOME THE LACK OF SOME FEATURES BY IMPLEMENTING SOME HACKY SOLUTIONS TO MOCK THEIR BEHAVIOUR 155 155 CONCLUSIONS
156. 4 NON-END-USER-APPLICATION- DEVELOPERS MISS A LOT OF LESS KNOWN FUNCTIONAL PROGRAMMING CONCEPTS IN JAVASCRIPT 156 156 CONCLUSIONS
157. This Talk 157
158. 158 158
159. 159 159 HTTPS://SPEAKERDECK.COM/YTHECOMBINATOR
160. MATHEUS ALBUQUERQUE @ythecombinator www.ythecombinator.space land@ythecombinator.space
161. THANKS tha f today f by Mathe Albuquрque <ythecombinator>