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

React internals (fibers, coroutines, algebraic effects)

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.


November 03, 2018

More Decks by r31gN_

Other Decks in Technology


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

  2. Strongbytes @r31gN_ CTO / GDE strongbytes

  3. Strongbytes Much appreciation for Brandon dail @aweary

  4. Strongbytes Warning!

  5. Strongbytes What is React Fiber?

  6. Strongbytes Async rendering Time slicing Suspense

  7. Strongbytes What is time slicing?

  8. Strongbytes Frame JS Work UI Work Frame JS Work UI

    Work Frame JS Work UI Work 16.67 ms
  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
  10. Strongbytes What is Suspense?

  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
  12. Strongbytes Being able to Interrupt work

  13. Strongbytes Being able to Interrupt React led to it being

  14. Strongbytes Some JS basics

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

  16. Strongbytes How does js manage uow?

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

  18. None
  19. foo The STAcK

  20. foo Bar The STAcK

  21. foo Bar Baz The STAcK

  22. foo Bar Baz console.log The STAcK

  23. foo Bar Baz The STAcK

  24. foo Bar The STAcK

  25. foo The STAcK

  26. The STAcK

  27. Strongbytes How does a stack frame Look like?

  28. None
  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
  30. Strongbytes But in react fiber …

  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
  32. Strongbytes How does a fiber look like?

  33. None
  34. Strongbytes

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

    A fiber A fiber A fiber
  36. Strongbytes Header Navigation App container Footer

  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
  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)
  39. Strongbytes All hail the fiber!

  40. Strongbytes Algebraic effects

  41. Strongbytes

  42. Strongbytes Can we apply this idea Somewhere else?

  43. Strongbytes

  44. Strongbytes Algebraic effects Effects Signal that something occured Effect handlers

    Run code in response To effects
  45. Strongbytes How does this affect react?

  46. Strongbytes

  47. Strongbytes How is this implemented?

  48. Strongbytes

  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
  50. Strongbytes Thank you! @r31gN_