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

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”.

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.

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.

Chrome Dev Tools documentation - Analyze runtime performance.