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)
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 re-written
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
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?
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?
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_