Master your lists rendering
summary
Monday.com shows concrete fixes: using index keys vs unique IDs causes thousands of needless updates (example: 1.8s to shift a 1,000-row list with index keys versus ~0 with stable IDs). Chrome DevTools timing drives decisions; switching to windowing (react-virtualized) cuts DOM from ~10,000 to ~500 nodes and saves ~2.7s per open for 8,000 daily users. Further gains come from a light render (minimal cells) and replacing mount/delete with recycling views, which reduces render time from ~230ms to ~35ms (≈75% improvement).
AI-written summary · about
chapters (18)
- 0:00Start
- 2:39Browser workflow
- 3:51The virtual
- 5:20Comparison algorithm
- 6:19The reconciliation algorithm 2 Assumptions
- 12:33POC React boards
- 13:44Example of heavy dom
- 14:29Implications of heavy lists
- 14:55What is windowing?
- 15:13React virtualized implementation
- 15:56Board scrolling example
- 16:27The Bolt Switch
- 20:38Remember the Status cell?
- 21:21Reducing the
- 22:00How we implemented it?
- 25:10POC - Virtualized
- 26:17React virtualized pitfalls
- 27:00Recycling Views
related talks
38mLive Coding - Optimizing a React application
34mOptimizing Performance in Large-Scale React & Node.js Applications
51mTips and tricks for optimizing your React application
28mDemystifying React Performance
01h 03mSpeed up your Web Application
23mPerfecting Your Profiling
28mVirtual lists will save your DOM
27mBuilding High Performance React Applications