@neos-project/debug-reason-for-rendering

React Performance Optimization Utility - Why does a component re-render?

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
242161Jun 18, 2021Dec 5, 2015Minified + gzip package size for @neos-project/debug-reason-for-rendering in KB

Readme

Debug Reason For Rendering - Why does React redraw a certain component?

(by the Neos Project - http://neos.io)

Usage

  1. Ensure you have decorators enabled in your project (this is the case e.g. for create-react-app).

  2. Install the package: yarn add --dev @neos-project/debug-reason-for-rendering

  3. Import the decorator function:

import debugReasonForRendering from '@neos-project/debug-reason-for-rendering';
  1. (Option 1) Annotate your shouldComponentUpdate method with @debugReasonForRendering:
@debugReasonForRendering
shouldComponentUpdate(...args) {
    return shallowCompare(this, ...args);
}
  1. (Option 2) Annotate your PureComponent class with @debugReasonForRendering:
@debugReasonForRendering
class MyComponent extends PureComponent {
    ...
}
  1. Profit! (see Chrome console)

Screenshot, explaining why updates are triggered

License

MIT

Created with <3 by the Neos Team.

http://neos.io

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.