DEV Community

Alex Sidorenko
Alex Sidorenko

Posted on • Originally published at alexsidorenko.com

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

rerender


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.

react-profiler

Ben Award - How to use the React Profiler to find and fix Performance Problems


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-profiler

Chrome Dev Tools documentation - Analyze runtime performance.


Originally published at alexsidorenko.com

Discussion (0)