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

97d21da8e0ffa8f81218a293482c253a?s=47 Matheus
January 28, 2020

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.

97d21da8e0ffa8f81218a293482c253a?s=128

Matheus

January 28, 2020
Tweet

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>