Understanding Performance of React Applications
summary
A demo React grid initially takes 5–8 seconds initial load because a huge virtual DOM is pushed into an empty real DOM; profiling with window.performance identifies hotspots. Componentizing rows and using shouldComponentUpdate / React.memo drops interactive updates to under 1 second after memo/shouldComponentUpdate. Infinite scrolling or chunked rendering amortizes initial work. A profiling story shows a single function causing 15 seconds to 33 milliseconds after one configuration change, so measure first, then apply targeted fixes.
AI-written summary · about
chapters (12)
- 0:00Understanding performance
- 2:57Initial performance issue
- 5:26User perception of speed
- 9:04Responsive applications
- 13:58React rendering bottleneck
- 20:13Profiling and quality
- 25:12Fixing performance bugs
- 29:15Componentizing for speed
- 33:49Memoization techniques
- 37:15Optimizing data display
- 41:45Incremental data loading
- 47:39Strategic technical choices
related talks
38mLive Coding - Optimizing a React application
20mReconciliation: The Root of Performant Applications
27mProfiling and Optimizing Performance of React Applications
28mDemystifying React Performance
34mOptimizing Performance in Large-Scale React & Node.js Applications
40mProfiling React rendering performance
20mPerformance Anxiety with React: Track and increase speed of your apps
17mReact Responsively, Render Responsibly