We can't find the internet
Attempting to reconnect
Something went wrong!
Hang in there while we get back on track
Inside Fiber: the In-Depth Overview You Wanted a TLDR for – Matheus Albuquerque, React Summit 2022
Get an in-depth understanding of React's complex architecture, including fibers, Q-routines, algebraic effects, and more.
- React’s complexity: React’s source code is complex, with 25 different types of tags that can be used to tag what needs to be done.
- Q-routines and fibers: Q-routines and fibers are similar, with Q-routines being a proposal by Dan Abramov and fibers being a concept in React that allows for cooperative scheduling and pause of execution.
- Algebraic effects: Algebraic effects are a way to handle effects, where the effect is handed over to the caller and handled by them.
- React’s evolution: React has evolved over time, with features like suspense and error boundaries, and has been influenced by other languages and concepts like homoeconicity and fibers.
- Fibers as units of work: Fibers can be thought of as units of work, allowing for tracking, scheduling, pause, and resume of execution.
- Visualizing and manipulating fibers: Fibers can be visualized and manipulated, allowing for a deeper understanding of how React works under the hood.
- Homoeconicity: Homoeconicity is a concept that allows for sharing of data between components, and is relevant to React’s design.
- React cache: React cache is a feature that allows for caching of rendered components, improving performance.
- Suspense: Suspense is a feature in React that allows for pausing and resuming of execution, making it easier to handle side effects and optimize rendering.
- Effect handlers: Effect handlers are a way to handle effects, where the effect is handed over to the caller and handled by them.
- Stack frames: Stack frames are a way to represent the execution state of a program, and React’s fiber architecture uses a call stack model.
- Cooperative scheduling: Cooperative scheduling is a technique used in React to allow for pause and resume of execution, making it easier to optimize rendering and handle side effects.