$30 off During Our Annual Pro Sale. View Details »

React internals (fibers, coroutines, algebraic effects)

r31gN_
November 03, 2018

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.

r31gN_

November 03, 2018
Tweet

More Decks by r31gN_

Other Decks in Technology

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