Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Inside Fiber: the in-depth overview you wanted ...

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.

Matheus Albuquerque

January 28, 2020
Tweet

More Decks by Matheus Albuquerque

Other Decks in Programming

Transcript

  1. 2 INTRODUCE YOU TO SOME CS CONCEPTS WE USUALLY FACE

    WHEN READING REACT.JS DISCUSSION THREADS ON TWITTER AND GITHUB 4 4 GOALS
  2. 1 REACT SOURCE CODE IS NOT EASY TO READ; IT

    IS CONSTANTLY CHANGING, AND SOME THOUGHTS ARE SPECULATIVE 6 6 DISCLAIMERS
  3. 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
  4. BRIEFLY, IT'S A REWRITE OF REACT’S CORE RECONCILIATION ALGORITHM TO

    PROVIDE GREATER CONTROL OVER THE RENDER CYCLE 20 20 FIBER • OVERVIEW
  5. 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
  6. 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
  7. 23 23 function add(x,y) { const result = x +

    y; return result; } add(2, 2) FIBER • OVERVIEW
  8. ITS EXCITING FEATURES DEPEND MOSTLY ON THE ABILITY TO PAUSE

    AND RESUME IN THE MIDDLE OF A RENDER CYCLE. 30 30 FIBER • OVERVIEW
  9. SOME OF THOSE FEATURES ARE: ↝ ERROR BOUNDARIES ↝ SUSPENSE

    ↝ TIME SLICING 31 31 FIBER • OVERVIEW
  10. ONCE A TEMPLATE GOES THROUGH THE JSX COMPILER, YOU END

    UP WITH A BUNCH OF REACT ELEMENTS. 36 36 FIBER • ELEMENTS AND NODES
  11. THIS IS WHAT’S REALLY RETURNED FROM THE RENDER METHOD OF

    REACT COMPONENTS, NOT HTML. 38 38 FIBER • ELEMENTS AND NODES
  12. 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
  13. 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
  14. 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.
  15. 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.
  16. YOU CAN THINK OF A FIBER AS A DATA STRUCTURE

    THAT REPRESENTS A UNIT OF WORK. 43 43 FIBER • ELEMENTS AND NODES
  17. 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.
  18. 47 47 HostRoot App div Header img Display div Control

    div Control div CHILD RETURN SIBLING
  19. CURRENT TREE 49 49 FIBER • ELEMENTS AND NODES REFLECTS

    THE STATE OF THE APPLICATION THAT WAS USED TO RENDER THE UI.
  20. WORK IN PROGRESS TREE 50 50 FIBER • ELEMENTS AND

    NODES REFLECTS THE FUTURE STATE TO BE FLUSHED TO THE SCREEN.
  21. 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.
  22. 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
  23. 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
  24. 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
  25. 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
  26. 60 60 TAG DEFINES THE TYPE OF THE FIBER. IT’S

    USED DURING RECONCILIATION TO DETERMINE WHAT WORK NEEDS TO BE DONE.
  27. 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.
  28. 67 67 MEMOIZEDPROPS PROPS OF THE FIBER THAT WERE USED

    TO CREATE THE OUTPUT DURING THE PREVIOUS RENDER.
  29. 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.
  30. 72 72 FIBER • ALGORITHM PHASES constructor componentWillMount Mounting componentWillReceiveProps

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

    Props setState() shouldComponentUpdate getSnapshotBeforeUpdate Updating Unmounting render componentDidMount componentDidUpdate componentWillUnmount
  32. THE ORIGINAL LIFECYCLE MODEL WAS NOT INTENDED FOR SOME OF

    THE UPCOMING FEATURES LIKE ASYNC RENDERING. 74 74 FIBER • ALGORITHM PHASES
  33. 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
  34. 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
  35. 78 78 FIBER • ALGORITHM PHASES • getDerivedStateFromProps() static getDerivedStateFromProps(props,

    state) { if (state.value !!" props.value) { return { derivedValue: deriveValueFromProps(props), mirroredProp: props.value } } return null; }
  36. ↝ 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()
  37. 80 80 FIBER • ALGORITHM PHASES • getSnapshotBeforeUpdate() getSnapshotBeforeUpdate(prevProps, prevState)

    { if (prevProps.list.length < this.props.list.length) { return this.listRef.value.scrollHeight; } return null; }
  38. ↝ 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()
  39. APPLIES SCHEDULED UPDATES TO COMPONENTS AND FIGURES OUT WHAT NEEDS

    TO BE UPDATED IN THE UI. 82 82 FIBER • ALGORITHM PHASES • RENDER PHASE
  40. 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.
  41. 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.
  42. 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
  43. WHEN REACT GETS TO THIS PHASE, IT HAS TWO TREES

    AND THE EFFECTS LIST. 87 87 FIBER • ALGORITHM PHASES • COMMIT PHASE
  44. ↝ 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
  45. ↝ 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
  46. A FIBER IS A GENERIC MODEL OF EXECUTION WHERE EACH

    UNIT WORKS TOGETHER COOPERATIVELY 91 91 FIBER • IN COMPUTER SCIENCE
  47. FIBERS ARE USED IN SYSTEMS LIKE WINDOWS AND OCALM PROGRAMMING

    LANGUAGE 92 92 FIBER • IN COMPUTER SCIENCE
  48. 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
  49. 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
  50. 3 A GENERATOR THAT CAN YIELD WITH A STACKFUL CONTINUATION

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

    WITH REACT SUSPENSE WE CAN PAUSE RECONCILIATION AT ANY DEPTH. 103 103 COROUTINES • OVERVIEW
  52. 3 A GENERATOR THAT CAN YIELD WITH A STACKFUL CONTINUATION.

    104 104 COROUTINES • OVERVIEW THAT MIGHT BE WHAT ANDREW MEANT IN HIS TWEET.
  53. 105 105 COROUTINES • OVERVIEW CONTROL IS PASSED TO THE

    CALLER AND HANDLED BY APPLICATION CODE COROUTINES WHEN YIELDING…
  54. 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…
  55. 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
  56. COROUTINES APPEARED WHEN WORK ON FIBER WAS FIRST GETTING GOING

    AS A SPECIFIC COMPONENT TYPE. 109 109 COROUTINES • IN REACT
  57. THE IDEA BEHIND COROUTINES — AS OPPOSED TO FIBERS — WAS TO GIVE COMPONENTS

    EXPLICIT CONTROL OVER YIELDING AND RESUMPTION. 112 112 COROUTINES • IN REACT
  58. 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.
  59. AN ABSTRACTION THAT REPRESENTS THE REMAINING STEPS IN A COMPUTATION.

    119 119 A CONTINUATION IS A CONTROL FLOW PRIMITIVE. CONTINUATIONS • OVERVIEW
  60. FOR ANDREW CLARK, “A CONTINUATION IS A CALLBACK THAT IS

    SCHEDULED WHEN YIELDING EXECUTION” 125 125 CONTINUATIONS • IN REACT
  61. 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);
  62. 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
  63. 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
  64. EFFECTS ASK THE CALLING ENVIRONMENT TO HANDLE A PARTICULAR TASK,

    LIKE LOGGING, READING FROM DATABASE, MUTATING SOME GLOBAL STATE. 131 131 EFFECT HANDLERS • OVERVIEW
  65. 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
  66. 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'; } }
  67. 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
  68. 139 139 THE REACT TEAM APPARENTLY SPENT SOME TIME EXPERIMENTING

    WITH USING EFFECT-HANDLER CONTROL STRUCTURES FOR MANAGING LAYOUT
  69. 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.
  70. 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.
  71. 149 149 SINCE REACT USES FIBERS INSTEAD OF NATIVE CALL

    STACK, IT CAN USE THROW TO INTERRUPT RENDERING WITH MINIMAL OVERHEAD.
  72. 1 I AM NOT QUITE SURE ABOUT TC39 APPROVAL BECAUSE:

    ↝ DIFFICULT TO OPTIMIZE ↝ AFFECTS CODE THAT DOESN'T USE THE FUNCTIONALITY 151 151 CONCLUSIONS
  73. 2 152 152 CONCLUSIONS REACT FIBER WAS A REWRITE OF

    REACT FOCUSED ON GIVING MORE LOW-LEVEL CONTROL OVER PROGRAM EXECUTION
  74. 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
  75. 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
  76. 3 REACT TRIES TO OVERCOME THE LACK OF SOME FEATURES

    BY IMPLEMENTING SOME HACKY SOLUTIONS TO MOCK THEIR BEHAVIOUR 155 155 CONCLUSIONS
  77. 4 NON-END-USER-APPLICATION- DEVELOPERS MISS A LOT OF LESS KNOWN FUNCTIONAL

    PROGRAMMING CONCEPTS IN JAVASCRIPT 156 156 CONCLUSIONS