Deep dive into react profiles and performance optimisation
summary
Uses React DevTools profiler (Chrome extension) with highlight updates and record why enabled to show exact commits and flame/timeline data; profiling shows an extra commit for typing then posting (two commits) and wide green highlights when unnecessary children re-render. Demonstrates that missing key prop makes sort trigger full re-renders, and that wrapping components with React.memo + useCallback cuts redundant commits and stops child re-renders, verified live in the demo.
AI-written summary · about
chapters (20)
- 0:00Introduction
- 0:52What to expect
- 1:46The problem
- 3:16Why is it slow
- 3:40React Profiler
- 4:14Profiler metrics
- 4:47React developer tool
- 5:13Profiler
- 6:16Settings
- 7:27Clear Console
- 8:49Like and timestamp
- 9:19Quick implementation
- 10:06Start profiling
- 10:37Tweet example
- 11:20Profiling
- 12:33Profile
- 13:53Add Tweet
- 14:10Profile Tweet
- 15:00Summary
- 15:23Outro
related talks
11mMaximizing React Perfomance with DevTools: Profiler and Components
27mProfiling and Optimizing Performance of React Applications
28mDemystifying React Performance
40mProfiling React rendering performance
23mPerfecting Your Profiling
18mProfiling with Performance tracks
20mPerformance Anxiety with React: Track and increase speed of your apps
08mReact Without DevTools