Supercharge Your React App Performance
Track, analyze, and optimize your React renders effortlessly with RenderX. Discover hidden bottlenecks, improve app speed, and deliver a seamless user experience.
How it helps
RenderX has access to the entire React tree and history, and can easily detect and highlight slow components (which render too slowly or too often)
Using the table view, you can easily sort components by render time, number of updates, mounts, hook usage and many other metrics
React.memo is very opaque. RenderX helps you see how often memoization actually kicks in, how many miliseconds of execution time it saves, and which props or state caused the exection.
How it works
Setup
RenderX works in a similar fashion to the React DevTools, with more advanced capabilities. For installation, you need to add the <script> tag to the right to your page, and make sure it runs before React initializes. The easiest place to add it is as the first child of the <head> tag. If placed correctly, RenderX should show up on the bottom of the page at startup.
<script src="https://unpkg.com/@cmocanu/renderx" defer></script>
Tree view
Shows the tree structure of the app, while warning you about components that would benefit from React.memo, take too long to render or have similar issues.
Detail view
Shows a detailed view of the component lifecycle, each render as well as the reason for the render, which props or state have changed and whether React.memo bailed out any renders
Table view
Easily find slow components by using the table timings view, which shows the number of updates, total and average render time, as well as how much time was saved by using React.memo