react-perf-component icon indicating copy to clipboard operation
react-perf-component copied to clipboard

Higher-order component that can measure component performance

react-perf-component

CircleCI

A higher-order React component for testing the performance of other components.

At the moment it only prints the result from Perf.printWasted as that's the most useful part.

npm install react-perf-component

Example

The best way to use this component is via babel and ES2016/ES7 decorators:

import perf from 'react-perf-component'

@perf
export default class MyComponent extends React.Component {
  render() {
    ...
  }
}

It can also fallback to being used like:

import perf from 'react-perf-component'

class MyComponent extends React.Component {
  render() {
    ...
  }
}

export default perf(MyComponent);

Thanks

Special mention to PureSin/react-perf for helping me to understand how to wrap a component with React.addons.Perf.