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.