React: Internals and Advanced Performance Patterns
summary
Explains that React fibers are component stack frames and shows a working micro scheduler built with generator+Suspense scheduler that yields every few milliseconds to avoid input jank (the generator demo keeps typing responsive while a 2M-loop runs). Demonstrates using useSyncExternalStore to stop wasted renders, swapping React for Preact to cut a 300KB main bundle roughly in half, using virtualization to render 10 items instead of 10,000, and runtime proxies to count jQuery calls — all practical fixes that proved effective.
AI-written summary · about
chapters (10)
- 0:00Introduction and motivation
- 1:09React's evolution and performance
- 16:47Fibers and React internals
- 39:27Coroutines and React
- 44:25Effect handlers in React
- 53:50Browser scheduling and long tasks
- 1:23:34React's scheduling strategies
- 1:42:35Performance techniques in React
- 2:36:32Measuring performance and future trends
- 2:48:57Closing remarks and Q&A
related talks
30mAlgebraic effects, Fibers, Coroutines...Oh my!
19mKeynote Part 3: React Performance End to End (React Fiber)
45mWhat's Next for React
39mThe best is yet to come: the Future of React
27mDeep diving on Concurrent React
31mPerformance wins with React 18
42mConcurrent Rendering in React
17mGetting Fluent with React