0.1.1 • Published 6 years ago
react-render-perf v0.1.1
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
- Fix linter
- Add test
- Change performance icon
- Add render monitor to Stateless component
- Optimize webpack
- Add JSDocs
Credits
Performance icon: Icon made from Icon Fonts is licensed by CC BY 3.0