React internals (fibers, coroutines, algebraic effects)

In this talk, we'll have a peek behind React's curtains with the hope of better understanding what makes async rendering (time slicing and suspense) possible. We'll talk about fibers, coroutines, and algebraic effects and see how they all come together to power the latest major iteration of Facebook's popular library.

Transcript

1. Strongbytes
   React internals
   (Fibers, coroutines & algebraic effects)
   

   View Slide

2. Strongbytes
   @r31gN_
   CTO / GDE
   strongbytes
   

   View Slide

3. Strongbytes
   Much appreciation for
   Brandon dail
   @aweary
   

   View Slide

4. Strongbytes
   Warning!
   

   View Slide

5. Strongbytes
   What is React Fiber?
   

   View Slide

6. Strongbytes
   Async rendering
   Time slicing
   Suspense
   

   View Slide

7. Strongbytes
   What is time slicing?
   

   View Slide

8. Strongbytes
   Frame
   JS Work
   UI Work
   Frame
   JS Work
   UI Work
   Frame
   JS Work
   UI Work
   16.67 ms
   

   View Slide

9. Strongbytes
   Time slicing
   • Assures that expensive work is split in chunks that can
   fit the 16.67 ms budget
   • Allows for prioritisation of work depending on its type
   so that it can maximize the page’s interactivity
   • Two APIs form the basis of this:
   requestAnimationFrame and requestIdleCallback
   

   View Slide

10. Strongbytes
    What is Suspense?
    

    View Slide

11. Strongbytes
    Suspense
    • A more generic feature, that solves a broader category
    of issues
    • In short, it’s a way for a component to suspend
    rendering and wait for some async data it needs (think
    API calls)
    • It’s interrupting React during the render process and
    asynchronously resuming it later
    

    View Slide

12. Strongbytes
    Being able to
    Interrupt work
    

    View Slide

13. Strongbytes
    Being able to Interrupt
    React led to it being
    re-written
    

    View Slide

14. Strongbytes
    Some JS basics
    

    View Slide

15. Strongbytes
    Unit of work (UOW)
    React
    components
    Javascript
    Functions
    

    View Slide

16. Strongbytes
    How does js manage uow?
    

    View Slide

17. Strongbytes
    The call stack
    foo
    Bar
    Baz A stack frame
    

    View Slide

18. View Slide

19. foo
    The STAcK
    

    View Slide

20. foo
    Bar
    The STAcK
    

    View Slide

21. foo
    Bar
    Baz
    The STAcK
    

    View Slide

22. foo
    Bar
    Baz
    console.log
    The STAcK
    

    View Slide

23. foo
    Bar
    Baz
    The STAcK
    

    View Slide

24. foo
    Bar
    The STAcK
    

    View Slide

25. foo
    The STAcK
    

    View Slide

26. The STAcK
    

    View Slide

27. Strongbytes
    How does a stack frame
    Look like?
    

    View Slide

28. View Slide

29. Strongbytes
    call stack model
    • This model is problematic if you need to conveniently
    interrupt it
    • There’s no way you can control, use or access the stack
    frames
    • For a particular UI frame (16.67 ms budget), the call
    stack can grow quickly and even exceed this threshold,
    which leads to jank
    

    View Slide

30. Strongbytes
    But in react fiber …
    

    View Slide

31. Strongbytes
    React fiber
    • The call stack model is no longer an issues here,
    because React Fiber is actually an implementation of
    the traditional call stack model, that you can fully
    control and manage.
    • This is done by using fibers
    • A fiber === a stack frame
    

    View Slide

32. Strongbytes
    How does a fiber
    look like?
    

    View Slide

33. View Slide

34. Strongbytes
    

    View Slide

35. Strongbytes
    The scheduler
    React fiber scheduler
    Header Navigation App container
    A fiber A fiber A fiber
    

    View Slide

36. Strongbytes
    Header
    Navigation
    App container
    Footer
    

    View Slide

37. Strongbytes
    Fibers
    • Fibers are, in academic terms, a generic model of
    execution where each unit of execution works together
    cooperatively
    • Used in Microsoft Windows, OCaml
    

    View Slide

38. Strongbytes
    Coroutines
    • A coroutine describes the same idea
    • In basic terms, coroutines and fibers refer to the same
    cooperative execution model
    • In academic terms, the line between them is blurry at
    best (fibers are thought to be more low-level and
    coroutines a higher construct)
    

    View Slide

39. Strongbytes
    All hail the fiber!
    

    View Slide

40. Strongbytes
    Algebraic effects
    

    View Slide

41. Strongbytes
    

    View Slide

42. Strongbytes
    Can we apply this idea
    Somewhere else?
    

    View Slide

43. Strongbytes
    

    View Slide

44. Strongbytes
    Algebraic effects
    Effects
    Signal that
    something occured
    Effect handlers
    Run code in response
    To effects
    

    View Slide

45. Strongbytes
    How does this affect react?
    

    View Slide

46. Strongbytes
    

    View Slide

47. Strongbytes
    How is this implemented?
    

    View Slide

48. Strongbytes
    

    View Slide

49. Strongbytes
    summary
    • React Fiber is a re-write of React focused on giving
    React more low-level control over program execution
    • Fibers/Coroutines are low-level cooperative ways to
    model program execution
    • Algebraic effects are a way to handle effects where the
    effect and the program behaviour are independent
    

    View Slide

50. Strongbytes
    Thank you!
    @r31gN_
    

    View Slide