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
   ide
   the -depth рview y w ted a
   

   View Slide

2. Goals
   2
   

   View Slide

3. 1 CLARIFY A BIT ABOUT WHAT HAPPENS
   UNDER OUR REACT COMPONENTS
   3
   3
   GOALS
   

   View Slide

4. 2
   INTRODUCE YOU TO SOME CS
   CONCEPTS WE USUALLY FACE WHEN
   READING REACT.JS DISCUSSION
   THREADS ON TWITTER AND GITHUB
   4
   4
   GOALS
   

   View Slide

5. Disclaimers
   5
   

   View Slide

6. 1 REACT SOURCE CODE IS NOT EASY TO
   READ; IT IS CONSTANTLY CHANGING,
   AND SOME THOUGHTS ARE SPECULATIVE
   6
   6
   DISCLAIMERS
   

   View Slide

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
   

   View Slide

8. 2 MAYBE THIS TALK WON’T BE 100%
   WHAT YOU’D CALL A TLDR
   8
   8
   DISCLAIMERS
   

   View Slide

9. Some Context
   9
   

   View Slide

10. View Slide

11. 11
    11
    HTTPS://GITHUB.COM/MACABEUS/JS-PROPOSAL-ALGEBRAIC-EFFECTS
    

    View Slide

12. 12
    12
    CONTINUATIONS
    ALGEBRAIC EFFECTS
    COROUTINES
    FIBERS
    THREADS
    GENERATORS
    

    View Slide

13. 13
    13
    CONTINUATIONS
    ALGEBRAIC EFFECTS
    COROUTINES
    FIBERS
    THREADS
    GENERATORS
    

    View Slide

14. Agenda
    14
    

    View Slide

15. ↝ FIBER(S)
    ↝ COROUTINES
    ↝ CONTINUATIONS
    ↝ EFFECT HANDLERS
    ↝ CONCLUSIONS
    15
    15
    AGENDA
    

    View Slide

16. Fiber
    16
    

    View Slide

17. OVERVIEW
    17
    

    View Slide

18. View Slide

19. 19
    19
    HTTPS://YOUTU.BE/ZCUYPIUIONS
    

    View Slide

20. BRIEFLY, IT'S A REWRITE OF REACT’S
    CORE RECONCILIATION ALGORITHM TO
    PROVIDE GREATER CONTROL OVER THE
    RENDER CYCLE
    20
    20
    FIBER • OVERVIEW
    

    View Slide

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
    

    View Slide

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
    

    View Slide

23. 23
    23
    function add(x,y) {
    const result = x + y;
    return result;
    }
    add(2, 2)
    FIBER • OVERVIEW
    

    View Slide

24. 24
    24
    FIBER • OVERVIEW
    

    View Slide

25. 25
    25
    FIBER • OVERVIEW
    

    View Slide

26. 26
    26
    FIBER • OVERVIEW
    

    View Slide

27. 27
    27
    FIBER • OVERVIEW
    

    View Slide

28. 28
    28
    FIBER • OVERVIEW
    

    View Slide

29. 29
    29
    FIBER • OVERVIEW
    

    View Slide

30. ITS EXCITING FEATURES DEPEND
    MOSTLY ON THE ABILITY TO PAUSE AND
    RESUME IN THE MIDDLE OF A RENDER
    CYCLE.
    30
    30
    FIBER • OVERVIEW
    

    View Slide

31. SOME OF THOSE FEATURES ARE:
    ↝ ERROR BOUNDARIES
    ↝ SUSPENSE
    ↝ TIME SLICING
    31
    31
    FIBER • OVERVIEW
    

    View Slide

32. View Slide

33. 33
    33
    HTTPS://YOUTU.BE/NLF0N9SACD4
    

    View Slide

34. ELEMENTS
    AND
    NODES
    34
    

    View Slide

35. View Slide

36. ONCE A TEMPLATE GOES THROUGH THE
    JSX COMPILER, YOU END UP WITH A
    BUNCH OF REACT ELEMENTS.
    36
    36
    FIBER • ELEMENTS AND NODES
    

    View Slide

37. View Slide

38. THIS IS WHAT’S REALLY RETURNED
    FROM THE RENDER METHOD OF REACT
    COMPONENTS, NOT HTML.
    38
    38
    FIBER • ELEMENTS AND NODES
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

43. YOU CAN THINK OF A FIBER AS A DATA
    STRUCTURE THAT REPRESENTS A UNIT
    OF WORK.
    43
    43
    FIBER • ELEMENTS AND NODES
    

    View Slide

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.
    

    View Slide

45. View Slide

46. View Slide

47. 47
    47
    HostRoot
    App
    div
    Header
    img
    Display
    div
    Control
    div
    Control
    div
    CHILD
    RETURN
    SIBLING
    

    View Slide

48. CURRENT TREE
    48
    48
    FIBER • ELEMENTS AND NODES
    WORK IN PROGRESS TREE
    

    View Slide

49. CURRENT TREE
    49
    49
    FIBER • ELEMENTS AND NODES
    REFLECTS THE STATE OF THE
    APPLICATION THAT WAS USED TO
    RENDER THE UI.
    

    View Slide

50. WORK IN PROGRESS TREE
    50
    50
    FIBER • ELEMENTS AND NODES
    REFLECTS THE FUTURE STATE TO BE
    FLUSHED TO THE SCREEN.
    

    View Slide

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.
    

    View Slide

52. SIDE
    EFFECTS
    52
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

56. NODE
    STRUCTURE
    56
    

    View Slide

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
    

    View Slide

58. View Slide

59. View Slide

60. 60
    60
    TAG
    DEFINES THE TYPE OF THE FIBER.
    IT’S USED DURING
    RECONCILIATION TO DETERMINE
    WHAT WORK NEEDS TO BE DONE.
    

    View Slide

61. View Slide

62. View Slide

63. View Slide

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.
    

    View Slide

65. 65
    65
    UPDATEQUEUE
    A QUEUE OF STATE
    UPDATES, CALLBACKS AND
    DOM UPDATES.
    

    View Slide

66. 66
    66
    MEMOIZEDSTATE
    STATE OF THE FIBER THAT
    WAS USED TO CREATE THE
    OUTPUT.
    

    View Slide

67. 67
    67
    MEMOIZEDPROPS
    PROPS OF THE FIBER THAT
    WERE USED TO CREATE THE
    OUTPUT DURING THE
    PREVIOUS RENDER.
    

    View Slide

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.
    

    View Slide

69. ALGORITHM
    PHASES
    69
    

    View Slide

70. REACT PERFORMS WORK IN TWO MAIN
    PHASES: RENDER AND COMMIT.
    70
    70
    FIBER • ALGORITHM PHASES
    

    View Slide

71. !!!
    71
    71
    FIBER • ALGORITHM PHASES
    

    View Slide

72. 72
    72
    FIBER • ALGORITHM PHASES
    constructor
    componentWillMount
    Mounting
    componentWillReceiveProps
    New Props setState()
    shouldComponentUpdate
    componentWillUpdate
    Updating Unmounting
    render
    componentDidMount componentDidUpdate
    componentWillUnmount
    

    View Slide

73. 73
    73
    FIBER • ALGORITHM PHASES
    constructor
    getDerivedStateFromProps
    Mounting
    New Props setState()
    shouldComponentUpdate
    getSnapshotBeforeUpdate
    Updating Unmounting
    render
    componentDidMount
    componentDidUpdate
    componentWillUnmount
    

    View Slide

74. THE ORIGINAL LIFECYCLE MODEL WAS
    NOT INTENDED FOR SOME OF THE
    UPCOMING FEATURES LIKE ASYNC
    RENDERING.
    74
    74
    FIBER • ALGORITHM PHASES
    

    View Slide

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
    

    View Slide

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
    

    View Slide

77. WHAT NOW?
    getDerivedStateFromProps()
    getSnapshotBeforeUpdate()
    77
    77
    FIBER • ALGORITHM PHASES
    

    View Slide

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;
    }
    

    View Slide

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()
    

    View Slide

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;
    }
    

    View Slide

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()
    

    View Slide

82. APPLIES SCHEDULED UPDATES TO
    COMPONENTS AND FIGURES OUT WHAT
    NEEDS TO BE UPDATED IN THE UI.
    82
    82
    FIBER • ALGORITHM PHASES • RENDER PHASE
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

86. ↝ [UNSAFE_]componentWillMount
    ↝ [UNSAFE_]componentWillReceiveProps
    ↝ getDerivedStateFromProps
    ↝ shouldComponentUpdate
    ↝ [UNSAFE_]componentWillUpdate
    ↝ render
    86
    86
    FIBER • ALGORITHM PHASES • RENDER PHASE
    

    View Slide

87. WHEN REACT GETS TO THIS PHASE, IT
    HAS TWO TREES AND THE EFFECTS LIST.
    87
    87
    FIBER • ALGORITHM PHASES • COMMIT PHASE
    

    View Slide

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
    

    View Slide

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
    

    View Slide

90. IN
    COMPUTER
    SCIENCE
    90
    

    View Slide

91. A FIBER IS A GENERIC MODEL OF
    EXECUTION WHERE EACH UNIT WORKS
    TOGETHER COOPERATIVELY
    91
    91
    FIBER • IN COMPUTER SCIENCE
    

    View Slide

92. FIBERS ARE USED IN SYSTEMS LIKE
    WINDOWS AND OCALM
    PROGRAMMING LANGUAGE
    92
    92
    FIBER • IN COMPUTER SCIENCE
    

    View Slide

93. Coroutines
    93
    

    View Slide

94. OVERVIEW
    94
    

    View Slide

95. 95
    95
    COROUTINES • OVERVIEW
    

    View Slide

96. 96
    96
    COROUTINES • OVERVIEW
    

    View Slide

97. 1 A GENERATOR (PRODUCER) THAT CAN
    ALSO CONSUME VALUES.
    97
    97
    COROUTINES • OVERVIEW
    

    View Slide

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
    

    View Slide

99. 2 A GENERATOR THAT CAN RESOLVE
    ASYNCHRONOUS VALUES, LIKE ASYNC/
    AWAIT.
    99
    99
    COROUTINES • OVERVIEW
    

    View Slide

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
     

     View Slide

101. 3 A GENERATOR THAT CAN YIELD WITH A
     STACKFUL CONTINUATION.
     101
     101
     COROUTINES • OVERVIEW
     

     View Slide

102. 3 A GENERATOR THAT CAN YIELD WITH A
     STACKFUL CONTINUATION DEEP AWAIT.
     102
     102
     COROUTINES • OVERVIEW
     

     View Slide

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
     

     View Slide

104. 3 A GENERATOR THAT CAN YIELD WITH A
     STACKFUL CONTINUATION.
     104
     104
     COROUTINES • OVERVIEW
     THAT MIGHT BE WHAT ANDREW MEANT IN
     HIS TWEET.
     

     View Slide

105. 105
     105
     COROUTINES • OVERVIEW
     CONTROL IS PASSED TO
     THE CALLER AND HANDLED
     BY APPLICATION CODE
     COROUTINES
     WHEN YIELDING…
     

     View Slide

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…
     

     View Slide

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
     

     View Slide

108. COROUTINES
     IN REACT
     108
     

     View Slide

109. COROUTINES APPEARED WHEN WORK
     ON FIBER WAS FIRST GETTING GOING AS
     A SPECIFIC COMPONENT TYPE.
     109
     109
     COROUTINES • IN REACT
     

     View Slide

110. View Slide

111. View Slide

112. THE IDEA BEHIND COROUTINES — AS
     OPPOSED TO FIBERS — WAS TO GIVE
     COMPONENTS EXPLICIT CONTROL OVER
     YIELDING AND RESUMPTION.
     112
     112
     COROUTINES • IN REACT
     

     View Slide

113. COROUTINES IN REACT NO LONGER
     EXIST.
     113
     113
     COROUTINES • IN REACT
     

     View Slide

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.
     

     View Slide

115. Continuations
     115
     

     View Slide

116. OVERVIEW
     116
     

     View Slide

117. View Slide

118. AN ABSTRACTION THAT REPRESENTS
     THE REMAINING STEPS IN A
     COMPUTATION.
     118
     118
     CONTINUATIONS • OVERVIEW
     

     View Slide

119. AN ABSTRACTION THAT REPRESENTS
     THE REMAINING STEPS IN A
     COMPUTATION.
     119
     119
     A CONTINUATION IS A
     CONTROL FLOW PRIMITIVE.
     CONTINUATIONS • OVERVIEW
     

     View Slide

120. CONTINUATIONS
     IN REACT
     120
     

     View Slide

121. View Slide

122. 122
     122
     HTTPS://GITHUB.COM/REACTJS/REACT-BASIC#CONTINUATIONS
     

     View Slide

123. View Slide

124. 124
     124
     HTTPS://GITHUB.COM/FACEBOOK/REACT/PULL/13595
     

     View Slide

125. FOR ANDREW CLARK,
     “A CONTINUATION IS A CALLBACK THAT
     IS SCHEDULED WHEN YIELDING
     EXECUTION”
     125
     125
     CONTINUATIONS • IN REACT
     

     View Slide

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);
     

     View Slide

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
     

     View Slide

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
     
     

     View Slide

129. Effect
     Handlers
     129
     

     View Slide

130. OVERVIEW
     130
     

     View Slide

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
     

     View Slide

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
     

     View Slide

133. View Slide

134. 134
     134
     HTTPS://OVERREACTED.IO/ALGEBRAIC-EFFECTS-FOR-THE-REST-OF-US
     

     View Slide

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';
     }
     }
     

     View Slide

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
     

     View Slide

137. EFFECT
     HANDLERS
     IN REACT
     137
     

     View Slide

138. View Slide

139. 139
     139
     THE REACT TEAM APPARENTLY SPENT SOME TIME
     EXPERIMENTING WITH USING EFFECT-HANDLER
     CONTROL STRUCTURES FOR MANAGING LAYOUT
     

     View Slide

140. View Slide

141. 141
     141
     AND ALSO FOR IMPLEMENTING THE CONTEXT API
     

     View Slide

142. View Slide

143. 143
     143
     SEBASTIAN POINTS THAT
     “CONCEPTUALLY, THEY [HOOKS]
     ARE ALGEBRAIC EFFECTS”.
     

     View Slide

144. !!!
     144
     144
     EFFECT HANDLERS • IN REACT
     

     View Slide

145. View Slide

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.
     

     View Slide

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.
     

     View Slide

148. 148
     148
     THROW-HANDLE-RESUME
     PATTERN.
     

     View Slide

149. 149
     149
     SINCE REACT USES FIBERS
     INSTEAD OF NATIVE CALL STACK, IT
     CAN USE THROW TO INTERRUPT
     RENDERING WITH MINIMAL
     OVERHEAD.
     

     View Slide

150. Conclusions
     150
     

     View Slide

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
     

     View Slide

152. 2
     152
     152
     CONCLUSIONS
     REACT FIBER WAS A REWRITE OF REACT
     FOCUSED ON GIVING MORE LOW-LEVEL
     CONTROL OVER PROGRAM EXECUTION
     

     View Slide

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
     

     View Slide

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
     

     View Slide

155. 3 REACT TRIES TO OVERCOME THE LACK OF
     SOME FEATURES BY IMPLEMENTING
     SOME HACKY SOLUTIONS TO MOCK
     THEIR BEHAVIOUR
     155
     155
     CONCLUSIONS
     

     View Slide

156. 4 NON-END-USER-APPLICATION-
     DEVELOPERS MISS A LOT OF LESS
     KNOWN FUNCTIONAL PROGRAMMING
     CONCEPTS IN JAVASCRIPT
     156
     156
     CONCLUSIONS
     

     View Slide

157. This Talk
     157
     

     View Slide

158. View Slide

159. 159
     159
     HTTPS://SPEAKERDECK.COM/YTHECOMBINATOR
     

     View Slide

160. MATHEUS ALBUQUERQUE
     @ythecombinator
     www.ythecombinator.space
     land@ythecombinator.space
     

     View Slide

161. THANKS
     tha f today
     f
     by Mathe Albuquрque
     

     View Slide