What the hell is Fiber and why should I care

React Fiber is an ongoing reimplementation of React's core algorithm. For more join the talk :)
Until then isfiberreadyyet.com.

Transcript

1. WHAT THE HELL IS FIBER
   AND WHY SHOULD I
   CARE?
   Fatos Hoti / @hotifatos
   

   View Slide

2. WHO AM I
   ➤ Fatos Hoti
   ➤ Pula, Croatia
   ➤ Berlin, Germany
   ➤ SW Engineer@Klara GmbH
   

   View Slide

3. View Slide

4. WHAT THE HELL IS FIBER
   AND WHY SHOULD I
   CARE?
   

   View Slide

5. REACT V.16
   

   View Slide

6. NEW REACT
   RECONCILIATION
   ALGORITHM
   

   View Slide

7. A NEW VERSION OF REACT
   WHERE INTERNALLY
   EVERYTHING CHANGES, BUT THE
   API STILL REMAINS THE SAME
   

   View Slide

8. {
   stateNode,
   child,
   return,
   sibling,
   …rest
   }
   

   View Slide

9. WHAT THE HELL IS FIBER
   AND WHY SHOULD I
   CARE?
   

   View Slide

10. HOW DOES CURRENT
    RECONCILIATION WORK?
    

    View Slide

11. LET'S TAKE A STEP BACK
    ➤ No need to explain how to get from A to B, just tell me what
    is B
    ➤ “Virtual DOM” && “Diffing"
    ➤ v.14 -> react && react-dom
    ➤ react-native, react-vr, react-aframe, react-hardware…
    ➤ reconciler && renderer
    

    View Slide

12. View Slide

13. View Slide

14. HostRoot
    List
    1
    2
    3
    Button
    Wrapper
    HostRoot
    div
    div
    div
    div
    button
    div
    

    View Slide

15. View Slide

16. View Slide

17. Fiber splits work into units of work
    (tree/subtree chunks) computes the
    changes and schedules their
    execution
    

    View Slide

18. requestIdleCallback
    do the work when you have time
    requestAnimationFrame
    do the work before the next frame
    

    View Slide

19. phase1 - renderer/reconciler
    interruptable
    phase2 - commit
    non-interruptable
    

    View Slide

20. View Slide

21. HostRoot
    List
    1 2 3
    Button
    child return
    sibling
    Initial render
    div div div
    

    View Slide

22. {
    stateNode,
    child,
    return,
    sibling,
    …rest
    }
    

    View Slide

23. WORK LOOP
    next unit of work
    time remaining
    

    View Slide

24. View Slide

25. Next unit of work - List
    Time remaining > 0
    HostRoot
    List
    1
    Button
    2 3
    HostRoot
    Current Work in Progress
    div div div
    

    View Slide

26. List has an update queue
    Time Remaining > 0
    HostRoot
    List
    1
    Button
    2 3
    HostRoot
    Current Work in Progress
    List
    div div div
    

    View Slide

27. this.setState((state, props) => {});
    render();
    

    View Slide

28. HostRoot
    List
    1
    Button
    2 3
    HostRoot
    1 2 3
    Current Work in Progress
    List
    Next unit of work - 1
    Time remaining > 0
    div div div div div div
    

    View Slide

29. Next unit of work - div
    Time remaining > 0
    HostRoot
    List
    1
    Button
    2 3
    HostRoot
    1 2 3
    Current Work in Progress
    List
    div div div div div div
    

    View Slide

30. Next unit of work - 2
    Time remaining > 0
    HostRoot
    List
    1
    Button
    2 3
    HostRoot
    1 2 3
    Current Work in Progress
    List
    div div div div div div
    

    View Slide

31. 1
    div
    

    View Slide

32. Next unit of work - 2
    Time remaining > 0
    HostRoot
    List
    1
    Button
    2 3
    HostRoot
    1 2 3
    Current Work in Progress
    List
    div div div div div div
    

    View Slide

33. Next unit of work - 3
    Time remaining > 0
    HostRoot
    List
    1
    Button
    2 3
    HostRoot
    1 2 3
    Current Work in Progress
    List
    div div div div div div
    

    View Slide

34. Next unit of work - div
    Time remaining > 0
    HostRoot
    List
    1
    Button
    2 3
    HostRoot
    1 2 3
    Current Work in Progress
    List
    div div div div div div
    

    View Slide

35. div
    1
    div 3
    

    View Slide

36. div
    1
    div 3 List
    

    View Slide

37. HostRoot
    List
    1
    Button
    2 3
    HostRoot
    1 2 3
    Current Work in Progress
    List
    div div div div div div
    Button
    Next unit of work - Button
    Time remaining > 0
    

    View Slide

38. View Slide

39. HostRoot
    List
    1
    Button
    2 3
    HostRoot
    1 2 3
    Current Pending Commit
    List
    div div div div div div
    Button
    

    View Slide

40. componentDidUpdate
    handleErrors
    div
    1
    div 3 List
    

    View Slide

41. HostRoot
    List
    1
    Button
    2 3
    HostRoot
    1 2 3
    Outdated Current
    List
    div div div div div div
    Button
    

    View Slide

42. View Slide

43. Next unit of work - 2
    Time remaining > 0
    Someone pressed the “Super-hyper-turbo urgent update”
    HostRoot
    List
    1
    Button
    2 3
    HostRoot
    1 2 3
    Current Work in Progress
    List
    div div div div div div
    

    View Slide

44. Priorities
    Synchronous / stack reconciler
    Task / before next tick
    Animation / before next frame
    High / requestIdleCallback
    Low / requestIdleCallback
    Offscreen / requestIdleCallback
    

    View Slide

45. phase1 - renderer/reconciler
    componentWillMount, componentWillReceiveProps, shouldComponentUpdate,
    componentWillUpdate
    phase2 - commit
    componentDidMount, componentDidUpdate, componentWillUnmount
    

    View Slide

46. OH MY GOD, THIS IS SO COOL, I WANT TO KNOW MORE
    ➤ https://www.youtube.com/watch?v=aV1271hd9ew
    ➤ https://www.youtube.com/watch?v=ZCuYPiUIONs
    ➤ https://www.youtube.com/watch?v=_MAD4Oly9yg
    ➤ https://facebook.github.io/react/blog/2015/12/18/react-
    components-elements-and-instances.html
    ➤ https://facebook.github.io/react/contributing/
    implementation-notes.html
    ➤ https://facebook.github.io/react/docs/reconciliation.html
    ➤ https://github.com/acdlite/react-fiber-architecture
    

    View Slide

47. yarn add react@next react-dom@next
    npm i react@next react-dom@next
    

    View Slide

48. View Slide

49. GRAZIE 1K
    Fatos Hoti / @hotifatos
    https://joind.in/talk/b6223
    

    View Slide