How to easily detect which component is re-rendering too often (without installing additional tools)

#javascript #webdev #tooling #react

Who has never had a problem with re-rendering components too often, cast the first stone. It happens — it’s a fact. Especially when you are a junior or just entered the frontend world. Without experience that bugs are hard to detect — everything looks fine but the browser is working hard to repaint, repaint and repaint elements on the page. Fortunately, Chrome DevTools offers a way to easily found them. You just need to follow these steps:

Open Chrome browser
Go to page you want to test
Open Chrome Dev Tools (ctrl + shift + I on Linux/Windows or cmd + shift + I on Mac)
Click 3 dots on the right side
Choose Rendering
Check the first checkbox titled Pain flashing there.

Thanks to that all repainted areas will be highlighted in green, so you can interact with a webpage and check if everything works are designed. Piece of cake! You don’t have to worry about having repainting problems on your webpage now.