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 -
Visit chrome://extensions/
-
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 -
Click the
Start Quantumbutton, then refresh the page or set state to trigger a re-render -
Optimize components!
NOTE: React Quantum works best for React v16+ local projects in development environments.
Definitions
| Term | Definition |
|---|---|
| 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. |
Contribute
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 [email protected].Team
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)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent