Deprecated

This functionality is now included in the React Devtools under the option "Highlight Updates"

Performance HOC

perf-hoc (previously lcHOC) is a HOC (higher order component) in React that visualize rendering and logs helpful information.

Enhance each component you want to study with perfHOC and every time that component updates, a green flash wraps the component (much like paint flashing in devtools) and debugging information is logged to the console.

Demo: https://perf-hoc-demo-ggdtpwmnny.now.sh/

Installation and usage

// Step 1: Install
npm install perf-hoc --save-dev;

// Step 2: Import
import perfHOC from 'perf-hoc';

// Step 3: Enhance
// by decorating
@perfHOC
class componentToStudy extends Component { ...

// or by wrapping
export default perfHOC(componentToStudy);

Customize

{
  log: {
    use: true,
    expanded: false,
    renderCount: true,
    state: true,
    props: true,
    timings: true
  },
  flash: true
}

You can customize perfHOC by overriding the default settings object above. Example below.

// Decorating with customization
@perfHOC({flash: false, log: {state: false}})

// Wrapping with customization
perfHOC(componentToStudy, {
  flash: false,
  log {
    state: false
  }
});

Contribute

If you have ideas on how to improve this component feel free to request a feature or submit a pull request!