https://github.com/vb/perf-hoc

(Deprecated) Visualize and detect unnecessary rendering and performance issues in React.
https://github.com/vb/perf-hoc

debugging higher-order-component performance react

Last synced: 4 months ago
JSON representation

(Deprecated) Visualize and detect unnecessary rendering and performance issues in React.

• Host: GitHub
• URL: https://github.com/vb/perf-hoc
• Owner: vb
• Created: 2017-04-08T13:47:33.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-06-25T07:07:15.000Z (over 6 years ago)
• Last Synced: 2024-08-05T03:33:05.004Z (4 months ago)
• Topics: debugging, higher-order-component, performance, react
• Language: JavaScript
• Homepage: https://perf-hoc-demo-ggdtpwmnny.now.sh/
• Size: 38.1 KB
• Stars: 85
• Watchers: 4
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## 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

```es6

// 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

```es6

{

  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.

```es6

// 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!