React Debugging with Performance Tracks
In this video, I start with a React app that is intentionally filled with performance bugs. I don't know where the bugs are ahead of time, just like when you're debugging a real application at work.
Together, we'll use the React Profiler and the new Performance Tracks in React DevTools to hunt down expensive re-renders, understand why components are rendering, and fix the actual problems instead of guessing.
This video is sponsored by JetBrains. Use code SHRUTI for 3 months of WebStorm, the JavaScript and TypeScript IDE, for free: https://www.jetbrains.com/store/redee...
Here's what I cover 👇
✅ How to read Flamegraphs and Ranked charts
✅ How to use Performance Tracks to understand Blocking, Transition, Suspense, and Idle work
✅ How to identify cascading updates and ghost renders
✅ Why React Compiler doesn't fix bad React code automatically
✅ How to reduce unnecessary re-renders with better state updates
✅ How to validate your performance improvements with before vs. after profiling
Sign up so you never miss any videos: https://tinyurl.com/shruti-newsletter
VIDEO REFERENCES
1. React DevTools Profiler https://react.dev/learn/react-develop...
2. React Performance Tracks https://react.dev/reference/dev-tools...
3. React Compiler https://react.dev/learn/react-compiler
RECOMMENDED RESOURCES
1. React Course for beginners: https://www.oreilly.com/library/view/...
2. Cracking the React Interview Book: https://topmate.io/shrutikapoor08/196...
3. Practice Frontend Interviews: https://www.greatfrontend.com/questio...
GET IN TOUCH
Mentorship - https://topmate.io/shrutikapoor08
Discord: http://bit.ly/shruti-discord
X / Twitter: / shrutikapoor08
INSTAGRAM: / techcreatorshrutikapoor
TIKTOK: / techcreatorshrutikapoor
Web: https://shrutikapoor.dev/
Patreon: / shrutikapoor
ABOUT ME
Hi friends 👋 I'm Shruti Kapoor, a Staff Software Engineer (previously at Slack and PayPal), now building independently and sharing what I learn from years of building React applications at scale. My goal is to help you become a better frontend engineer through practical tutorials, performance deep dives, and AI-powered workflows.
Thanks for watching and supporting my channel 🤍
CHAPTERS
0:00 Intro
0:58 Current state of the app
2:05 Turning on React Profiler and React Performance Tracks
2:46 Finding bugs using React Profiler
3:11 React Performance Tracks
4:14 Suspense and Transitions
5:21 Why is this app slow?
7:12 Memoization using React Memo or React Compiler?
9:00 Why memoization won't fix all your bugs
9:56 Debugging code
12:59 Summary
Topics covered
React Profiler, React Performance Tracks, React performance optimization, React DevTools Profiler, React DevTools, React performance debugging, Debugging React performance, React re-renders, Why React components re-render, Unnecessary re-renders, React Flamegraph, React.memo, React Compiler, React Suspense, useTransition hook
🔔 Subscribe for more React, AI, and Senior Frontend Engineering content!
Sub: 46698
#reactjs #frontend #performance #shrutikapoor