Profiling with Performance tracks
summary
React adds Performance Tracks into Chrome DevTools (enabled in React 19.2 for dev/profiling builds) that put React’s scheduler, component renders, network, and server requests on one timeline so you can correlate events and durations. Custom tracks expose scheduler priorities: blocking, transition, suspense, idle, a components track that shows renders/mounts and changed props with stack traces in development, and an idle prepared pre-rendering (activity) visible on idle bar. The tracks surface cascading updates, where an effect triggers a new update, and integrate with React DevTools; a Suspense panel arrives later.
AI-written summary · about
chapters (9)
- 0:00Introduction
- 0:43App demo
- 2:39Performance recording
- 3:22Custom tracks overview
- 5:16Analyzing hover interactions
- 8:07Analyzing click interactions
- 12:31Advanced profiling
- 14:07Server tracks and roadmap
- 16:06Suspense panel preview
related talks
16mDeep dive into react profiles and performance optimisation
23mPerfecting Your Profiling
28mDemystifying React Performance
11mMaximizing React Perfomance with DevTools: Profiler and Components
20mProfiling React Web Apps in Production
40mProfiling React rendering performance
27mProfiling and Optimizing Performance of React Applications
20mPerformance Anxiety with React: Track and increase speed of your apps