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


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


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

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


  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:
shouldComponentUpdate(...args) {
    return shallowCompare(this, ...args);
  1. (Option 2) Annotate your PureComponent class with @debugReasonForRendering:
class MyComponent extends PureComponent {
  1. Profit! (see Chrome console)

Screenshot, explaining why updates are triggered



Created with <3 by the Neos Team.


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.