Visualize your React application's component performance metrics with a live heat map.
What It Does
React Quantum parses through your React application to create a color-coded tree model of its component hierarchy. On hover, each tree node will display two key component performance metrics—render time and re-render frequency—as well as memoized state and props to indicate what, specifically, initiated the render.
The beauty is in the heat map: Nodes will change color depending on the component's rendering performance, making it easy to pinpoint possible bottlenecks at a glance.
How To Get It
Quantum is available as a Chrome extension through the Google Chrome Web Store.
If you prefer to install locally, setup instructions are as follows:
$ git clone https://github.com/ReactQuantum/ReactQuantum.git
$ cd ReactQuantum
$ npm install
$ npm run build-dev
Click the Load Unpacked button, then select your './ReactQuantum/build' directory
Open Chrome Developer Tools (Inspect) on any page that uses React, then click on
React Quantumat the top of the Developer Tools panel
Start Quantumbutton, then refresh the page or set state to trigger a re-render
NOTE: React Quantum works best for React v16+ local projects in development environments.
|Render||When a React component instance or DOM element is processed and checked to see if work needs to be done.|
|Total render time||Total time a component took to render, including its children.|
|Individual render time||Total time an individual component instance or DOM element took to render.|
|Current State||The current state of a component. Only stateful nodes will have a value for this property.|
|Props||The current props object being passed to this node.|
|Commit Count||The number of times a node’s work has started in the commit phase. This could be changes to a component’s state or props, or a DOM element being added or removed.|
Feel free to fork this repo and submit pull requests. If you'd like to report bugs or send suggestions, please log an issue or contact us at Contributereact.email@example.com.
Altai Chiang (https://github.com/alchi126)
Alyson Swerdloff (https://github.com/alyswerdlova)
Eric Choy (https://github.com/Silly-Turtle)
Jae Park (https://github.com/wjp241)