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 Frame JS Work UI Work Frame JS Work UI

    Work Frame JS Work UI Work 16.67 ms
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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)
  8. 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