Usage no npm install needed!

<script type="module">
  import reactLogStatePropsDiffs from 'https://cdn.skypack.dev/react-log-state-props-diffs';
</script>

README

react-log-state-props-diffs

A decorator to be applied to shouldComponentUpdate for cleanly logging out diffs between old state/new state and old props/new props.

Run npm i --save-dev react-log-state-props-diffs or yarn add react-log-state-props-diffs.

After that, import it in your JS file:

import logStateAndPropsDiffs from 'react-log-state-props-diffs';

Apply this decorator to shouldComponentUpdate method for the component you're interested in.

Eg.:

@logStateAndPropsDiffs
shouldComponentUpdate() {
    // ... Do whatever checks or logic here
    return true;
}

You will need support to transpile decorators. Use babel for that alongside babel-plugin-transform-decorators-legacy plugin.

Eg. of .babelrc file:

{
    "presets": ["react", "es2015"]
    "plugins": ["transform-decorators-legacy"]
}