Developer tool to monitor React performance
React ChronoScope is a performance monitoring tool for React developers. It visualizes React application's components displaying components that require further optimization.
React ChronoScope parses through the React application to construct an interactive tree diagram of the component hierarchy.
npm i react-chronoscope
import chronoscope from 'react-chronoscope'; const container = document.querySelector('#root'); render( , container, () => chronoscope(container) );
After installing both the Chrome Extension and the npm package, run the react application in the browser. Then open Chrome Developer Tools (Inspect) on the React Application and click on
React ChronoScopeat the top of the Developer Tools panel.
- component was unnecessarily re-rendered.
- component was re-rendered
- component was not re-rendered
Timeline that illustrates when each component renders.
This project is licensed under the MIT License - see the LICENSE file for details