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.
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 Dev Tools documentation - Analyze runtime performance.
Originally published at alexsidorenko.com
Top comments (0)