Beyond virtual lists: Introducing FSRW transformations to render large
summary
Map-reduce–inspired FSRW transformations rework filtering, sorting and windowing so a log view keeps up with a live stream (demo uses a live Bitcoin feed). Implementation uses Flipper data source package plus react-virtual, incremental filter + binary-search insertion and ref-based state to avoid unnecessary renders and only update when items land inside the visible window. Result: about a 10× frame-rate increase, roughly hundreds per second processed and ~50% less JS CPU in production-like measurements.
AI-written summary · about
chapters (15)
- 0:00Introduction
- 0:26Demo
- 5:00Performance demo
- 6:45Starting scenario
- 8:38React naively
- 8:55Too much data
- 10:06Virtualizing
- 15:57Sorting
- 18:10Faster sorting
- 18:42Faster rendering
- 21:40Optimizations
- 22:03Other updates
- 22:25Flipping Data Source
- 26:43Future work
- 27:45Outro
related talks
23mBeyond Virtual Lists: How to Render 100K Items with 100s of Updates/sec in React
17mGetting Fluent with React
28mHigh Performance Data Visualization for the Web
29mParallel computing in ReactJS: Provide a pleasant user experience
32mFrom hot data sources to interactive clients in a hurry
43mNo More Jank: Escaping the Matrix of Frame Drops
30mConcurrent Rendering in React
31mStreaming React for Faster UIs