With ReaPer, developers can start and end a session to record render event data to see a dashboard of render data details and information on how the virtual DOM and each component's performance changes during a session.
To get started, install the ReaPer extension from the Chrome Web Store. Make sure you also have React Developer Tools extension installed on your browser.
If you'd like to do a manual installation, please refer to ReaPer's GitHub repository's section on Manual Installation.
Developers have a bar graph of render events and event durations.
Another graph displays the render time for each component during a specific render event.
This list holds all the components re-rendered during a session. It displays the number of times that component was re-rendered along with the average render duration.
By traversing the React Fiber tree, a visual of the React virtual DOM is created and displayed, allowing developers to see how the virtual DOM and components’ state and props change over time.
ReaPer's dashboard displays all four sets of data to analyze the render events in a single panel.
Software Engineer
Software Engineer
Software Engineer
Software Engineer
Software Engineer