Monitor your component render time and check if we are making unnecessary render calls
yarn add react-render-perf
npm install --save react-render-perf
You can use the MonitorRender
to decorate any React component and monitor the render performance. Currently we don't
support Stateless
components.
-
disable {Boolean}
- if we want to disable the monitor in case we want to push our app to production. -
consoleReport {Boolean}
- enable the console report. -
uiReport {Boolean}
- enable the UI report.
import { RenderMonitor } from 'react-render-perf';
import MyFirstComponent from './MyFirstComponent';
import MySecondComponent from './MySecondComponent';
// Example with default options
const MyComponentWithRenderMonitor = RenderMonitor(MyFirstComponent);
const customOptions = {
uiReport: false,
};
const MyComponentWithConsoleMonitor = RenderMonitor(MySecondComponent);
const App = () => (
<div>
<MyComponentWithRenderMonitor />
<MyComponentWithConsoleMonitor />
</div>
);
- [ ] Fix linter
- [ ] Add test
- [ ] Change performance icon
- [ ] Add render monitor to Stateless component
- [ ] Optimize webpack
- [ ] Add JSDocs
Performance icon: Icon made from Icon Fonts is licensed by CC BY 3.0