Auditing React Performance
May 20, 2022
How to use the React DevTools Profiler
Finding what's making your react app slow can be hard, but hopefully, I can give provide some tools and places you can look to improve your performance with less hassle. There are three main tools I always use when debugging performance:
- React DevTools Profiler
- Chrome DevTools Performance Panel
Each are great at providing solving different problems - this post covers how to use the React DevTools Profiler.
You probably already have the React DevTools installed, but if you don't you can install it from the chrome web store. Now you have Chrome DevTools installed let's get stuck into an example from my website.
In the profiler, you can go through each render by using the arrows in the top right (where it says 2 / 5). This particular view is called the Ranked chart. Here I was looking at how changing pages are rendered for me, and I can use this view to see what took the longest to render. I find the Ranked chart the most useful in bloated components since it shows the components that took the longest to render at the top.
The other view for a recording I use is the flamegraph:
This shows the components in the order they were nested (for example
Items). What's useful about this view is it will gray out components that have skipped
rerendering, so you can identify which component is causing large sections of your app to
rerender, which can be harmful to performance if it happens frequently.
You can also use the
Highlight updates when components rerender option in the React DevTools
settings to get a similar more visual version of this.
What did you think?
Whilst the profiler can be very useful for tracking down what components are causing you trouble rendering, but sometimes your issue isn't to do with rendering. Some of the other tools mentioned can be better at solving those problems. If there was something you think I missed, let me know!