Making Your React Apps Perform At Scale
summary
A demo budget app shows Lighthouse mobile audit reporting a 9s First Contentful Paint and screenshots that point at a heavy chart; the React Profiler breaks rendering down and pinpoints that chart as the biggest cost (nearly half a second on one run). Recommendations include running a production build, virtualizing or paginating large lists, lazy loading with code splitting and chunking, caching via Workbox caching, tree shaking and pruning unused packages, and preferring useContext/useMemo over full Redux for most apps.
AI-written summary · about
chapters (10)
- 0:00Intro
- 1:04Overview
- 2:10Initial Create React App
- 5:10Performance Tests
- 7:02Lighthouse
- 9:16Profiler
- 11:33Network
- 13:39Performance
- 16:36Clean Up
- 20:00Wrap Up
related talks
39mMaking Your React Apps Perform At Scale
26mLightning Fast React Apps
34mOptimizing Performance in Large-Scale React & Node.js Applications
20mPerformance Anxiety with React: Track and increase speed of your apps
25mDesigning High Performance React Applications
32mPractical Performance Tips Building Progressive Web Apps
27mBuilding High Performance React Applications
53mHelp! My React app is slowwwww!