Lightning Fast React Apps
summary
Covers concrete fixes: ensure production React build (use create-react-app or set NODE_ENV), avoid mutating state, give stable keys, bind handlers once, and prefer PureComponent/shouldComponentUpdate only after measuring. Measures and tools: Chrome Performance and React DevTools to target ~10ms work per frame, reselect to memoize Redux selectors, webpack bundle analysis, and windowing with react-virtualized. Cites numbers: 53% mobile abandonment if load >3s and ~60% of page bytes are images; recommends code-splitting and next.js for SSR.
AI-written summary · about
chapters (23)
- 0:00Introduction
- 0:36Who am I
- 1:27Agenda
- 2:21Why should we care
- 3:02Frame rate
- 4:03Factors to make faster
- 4:39Use the correct build
- 5:45Prevent it
- 6:29Unique keys
- 7:45Repeating keys
- 8:49Binding event handlers
- 10:26Dont mutate objects
- 11:38Dont use push and pop
- 12:08Lifecycle methods
- 13:27Reselect
- 14:51Virtualize
- 15:25The Pareto Rule
- 16:24Be Lazy
- 17:14How Does It Make You Feel
- 19:12React Dev Tools
- 19:40Webpack
- 20:54Image Optimization
- 23:49Resources
related talks
28mDemystifying React Performance
27mBuilding High Performance React Applications
21mMaking Your React Apps Perform At Scale
53mHelp! My React app is slowwwww!
25mDesigning High Performance React Applications
08mLightning fast SSR React apps with top perceived performance and no (client side) JavaScript
34mOptimizing Performance in Large-Scale React & Node.js Applications
39mMaking Your React Apps Perform At Scale