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

Package detail

react-render-perf

readme