A Cartoon Intro to React Fiber
summary
Explains that Fiber replaces React’s old reconciler with a new JavaScript fiber object and workLoop that breaks rendering into interruptible reconcile phase and an uninterruptible commit phase, uses double buffering and an effect list, and assigns updates explicit priority levels (synchronous, task, animation, high/low/offscreen). Uses requestIdleCallback and requestAnimationFrame to schedule work so quick UI updates (typing/animation) jump ahead of expensive tree-wide updates. Mentions a Mozilla parallelization case that drops render time from 130 ms to 30 ms.
AI-written summary · about
chapters (16)
- 0:00Start
- 0:49Example of a React App
- 1:21What Does Fiber Do
- 1:33Fiber Is the New Reconciliation Algorithm for React
- 1:47Virtual Dom
- 3:12Fiber Reconciler
- 6:24Main Thread
- 7:16How the Existing Reconciler Works
- 10:14Host Root
- 13:03The Reconcile Phase
- 14:18Request Idle Callback
- 14:55Work-in-Progress Tree
- 16:31Lists
- 22:26Phase Two
- 28:22Cooperative Scheduling
- 30:14Closing
related talks
32mA Cartoon Intro to Fiber
19mWhat the hell is fiber and why should I care
24mReact Fiber Internals: Reconciliation, Scheduling, and Concurrent Rendering
45mWhat's Next for React
30mAlgebraic effects, Fibers, Coroutines...Oh my!
22mInside Fiber: the In-Depth Overview You Wanted a TLDR for
36mInside Fiber: the in depth overview you wanted a TLDR for
19mKeynote Part 3: React Performance End to End (React Fiber)