React Debugging with Performance Tracks

Published: 28 July 2026
on channel: Shruti Kapoor

7,448

413

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

On this page of the site you can watch the video online React Debugging with Performance Tracks with a duration of hours minute second in good quality, which was uploaded by the user Shruti Kapoor 28 July 2026, share the link with friends and acquaintances, this video has already been watched 7,448 times on youtube and it was liked by 413 viewers. Enjoy your viewing!

2,790