Tips and tricks for optimizing your React application
summary
Real cases and numbers: replacing a custom clone-element pattern drops tab switch time from ~760ms to ~80ms and from ~5s to ~1s on old devices, proving a single change saves 9–10x; native→web event latency measures ~20–70ms so the bridge is not the root cause; use Chrome Performance and React Profiler plus console timing with performance.now for precise timestamps; prefer refs and conditional updates or returning null from setters to avoid costly re-renders within the 60 ms frame budget and avoid react cloneElement slowdown.
AI-written summary · about
chapters (19)
- 0:00Intro
- 1:03Example
- 2:14Measure
- 3:11Profiling
- 4:14Swipe component
- 6:56Turn off feature
- 7:31Results
- 8:27React Clone Element
- 13:14User Interface
- 14:15Event Bridge
- 19:27Root Cause
- 21:12Performance Now
- 22:44Rerenders
- 29:46Speed example
- 31:47Navigation example
- 38:30Summary
- 40:24Poll results
- 42:19Audience questions
- 45:57Console time
related talks
28mDemystifying React Performance
34mOptimizing Performance in Large-Scale React & Node.js Applications
27mProfiling and Optimizing Performance of React Applications
25mDesigning High Performance React Applications
26mLightning Fast React Apps
53mHelp! My React app is slowwwww!
40mProfiling React rendering performance
27mBuilding High Performance React Applications