Building High Performance React Applications
summary
React at Best Buy stays fast by measuring and reducing actual DOM work: using keys cuts a sample list render from 34ms → 17ms, adding shouldComponentUpdate drops it to 9ms, and Pure/functional components give similar gains. Setting NODE_ENV=production yields 2–8× faster builds. Other practices: immutable data for cheap change detection, server-side (isomorphic) rendering to shorten first paint, gzip/minify assets, serve images from a CDN, and analyze bundles with webpack-bundle-analyzer to remove heavy deps like moment or Bluebird.
AI-written summary · about
chapters (19)
- 0:00Intro
- 0:14BUILDING HIGH PERFORMANCE REACT APPLICATIONS
- 1:24+100MS DELAY -1% AMAZON'S SALES
- 2:03VIRTUAL DOM
- 3:44SHORT ANSWER
- 4:04LONG ANSWER
- 5:3734 MS
- 8:37SPECIFY EXACTLY WHENA COMPONENT SHOULD RENDER
- 10:41DOES A SHALLOW COMPARISON OF ALL PROPS/STATE
- 13:54FANCY WORD FOR MAKING A NEW COPY OF AN OBJECT
- 14:16MAKES TRACKING CHANGES CHEAP
- 15:43USE ISOMORPHIC REACT
- 17:22DEBUGGING IS TRICKIER MANAGING CONFIGS NO DOM
- 20:18USE STATELESS COMPONENTS
- 21:16MORE THOUGHTS ON PERFORMANCE
- 21:37GZIP ALL THE PLAINTEXT
- 21:57WHAT ABOUT IMAGES?
- 22:10ANALYZE YOUR WEBPACK
- 24:26THE MOST IMPORTANT SLIDE
related talks
26mLightning Fast React Apps
28mDemystifying React Performance
25mDesigning High Performance React Applications
21mMaking Your React Apps Perform At Scale
20mPerformance Anxiety with React: Track and increase speed of your apps
34mOptimizing Performance in Large-Scale React & Node.js Applications
27mProfiling and Optimizing Performance of React Applications
51mTips and tricks for optimizing your React application