Perfecting Your Profiling
summary
React DevTools plus Chrome Performance panel expose concrete fixes: recording a profile reveals 254 renders → 2 renders by avoiding state-driven style updates and directly mutating the DOM for width, the profiler points to hook 30 (state width), switching from innerHTML to textContent removes a function that consumes ~34% self time, the realtime metrics view (web vitals moved into Performance) flags slow interactions so using useDeferredValue turns red INP interactions green, caching container height prevents forced layouts, Node and NX builds are profiled via --inspect.
AI-written summary · about
chapters (7)
- 0:00Introduction
- 1:13React dev tools profiling
- 7:22Interaction to next paint
- 12:06Performance panel deep dive
- 16:21Solving layout thrashing
- 18:53Quick fire performance tips
- 22:24Conclusion
related talks
11mMaximizing React Perfomance with DevTools: Profiler and Components
16mDeep dive into react profiles and performance optimisation
59mProfiling JavaScript Like A Pro
40mProfiling React rendering performance
27mProfiling and Optimizing Performance of React Applications
28mDemystifying React Performance
18mProfiling with Performance tracks
20mProfiling React Web Apps in Production