React Performance

Improve your React application's performance.


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.

Get Started

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.


Render Events & Event Durations

Developers have a bar graph of render events and event durations.


Component Details

Another graph displays the render time for each component during a specific render event.


Re-render Details

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.


Virtual DOM Tree

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.


Dashboard: All Charts

ReaPer's dashboard displays all four sets of data to analyze the render events in a single panel.


The ReaPer Team

Anna Ko

Software Engineer

Jamie Lee

Software Engineer

Katrina McDonagh

Software Engineer

Michael Arita

Software Engineer

Nancy Yu

Software Engineer

Simplify improving React performance

Get Started