Alex Sidorenko

My React App is Slow and I Don't Know Why

September 28, 2021

What performance testing tools are available in React world, and how to start using them?

Inspect what components are getting re-rendered

You can use React Developer Tools to get a quick overview of what components re-render. Enable option “Highlight updates when components render”.

Using React Developer Tools to see what components are getting rerendered

Figure out what renders to fix

Not all renders are equal. Some are less performant than others. Don’t try to fix every unnecessary render. Instead, find bottlenecks and fix them. React Developer Tools Profiler tab will help you with this.

Using React Developer Tools to detect slow renders

How to Detect Slow Renders in React

Investigate other performance problems

Often, web app performance issues are not related to React. Analytics tracking libraries, excessive CSS animations, non-optimized images, iframes, and many more factors can contribute to poor performance. You can use the Chrome DevTools Performance tab to debug these issues.

Using Chrome DevTools Profiler to investigate performance problems

Chrome Dev Tools documentation - Analyze runtime performance.

Want to get better at modern React?

Subscribe to get one short article delivered to your inbox every week

One article a week. No spam.
Unsubscribe any time