Skip to content

Inside Fiber: the in-depth overview you wanted a TLDR for

At the core of React.js, lies reconciliation; the mechanism that tracks changes in a component state and projects the updated state to the screen. Starting from version 16, the core team rolled out a new implementation of that internal instances tree (components, DOM nodes, etc.) and the algorithm that manages it code-named Fiber.

In this talk, I want to provide an in-depth overview of important concepts and relevant data structures. We'll then explore how React uses the algorithm to perform initial render and process updates and a few details of the scheduler, the child reconciliation process, and the mechanism of building an effects list.

Last but not least, we'll go through a few magic words we hear a lot, like coroutines, continuations, fibers, threads, generators, and algebraic effects and see how they all relate to React.js itself.


Manchester, United Kingdom

June 17, 2020

Manchester Web Meetup #14

📍 On The Beach

👥 N/A

Prague, Czech Republic

January 28, 2020

PragueJS 2020 #1

📍 Studio F

👥 ≈ 60 people audience


Matheus Albuquerque © 2020.
Made with 💖 while high either on ☕ or 🍻 — or both.