React Render Perf
Monitor your component render time and check if we are making unnecessary render calls
Installation
Yarn
yarn add react-render-perf
NPM
npm install --save react-render-perf
Example
Mini demo
Console Report
UI Report
Description
You can use the MonitorRender
to decorate any React component and monitor the render performance. Currently we don't
support Stateless
components.
Options:
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.
Sample usage
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>
);
Roadmap
- <input disabled="" type="checkbox"> Fix linter
- <input disabled="" type="checkbox"> Add test
- <input disabled="" type="checkbox"> Change performance icon
- <input disabled="" type="checkbox"> Add render monitor to Stateless component
- <input disabled="" type="checkbox"> Optimize webpack
- <input disabled="" type="checkbox"> Add JSDocs
Credits
Performance icon: Icon made from Icon Fonts is licensed by CC BY 3.0