Skip to content
(Deprecated) Visualize and detect unnecessary rendering and performance issues in React.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Added new babel compiled output Jun 23, 2017
src rename lcHOC to perfHOC Jul 25, 2017
.gitignore Updated gitignore Apr 12, 2017
README.md
package.json Updated package json with correct github links Jun 23, 2017

README.md

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!

You can’t perform that action at this time.