Skip to content

Monitor your component render time and check if we are making unnecessary render calls

Notifications You must be signed in to change notification settings

williamcabrera4/react-render-perf

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Build Status

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

https://github.com/williamcabrera4/react-render-perf/blob/master/images/demo.gif

Console Report

https://github.com/williamcabrera4/react-render-perf/blob/master/images/consoleReport.png

UI Report

https://github.com/williamcabrera4/react-render-perf/blob/master/images/uiReport.png

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

About

Monitor your component render time and check if we are making unnecessary render calls

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published