2

For debugging my react app I want to know which prop was changed. When the application runs it executes componentWillReceiveProps infinite times. I don't know which prop was received. Is there any way to identify the modified props by comparing this.props and nextProps or by any other way

PranavPinarayi
  • 3,037
  • 5
  • 21
  • 32
  • May be stringify both `this.props` and `newProps` and console.log to cross check in `componentWillReceiveProps` – Cyril Cherian Nov 28 '17 at 06:02
  • @Cyril Can't stringify `this.props' . `Uncaught TypeError: Converting circular structure to JSON' error occured. – PranavPinarayi Nov 28 '17 at 06:36
  • 1
    Then may be you might use this `https://www.npmjs.com/package/deep-object-diff` and console.log the report. but you need to remove it post debugging as this is an overhead. – Cyril Cherian Nov 28 '17 at 06:54
  • could you show your code please, especially `componentWillReceiveProps` lifecycle method – Elias Ghali Nov 28 '17 at 07:51

2 Answers2

1

You can use this package: maicki/why-did-you-update (about 3k stars on Github as of writing).

Why-did-you-update is a function that monkey patches React and notifies you in the console when potentially unnecessary re-renders occur.

charlax
  • 25,125
  • 19
  • 60
  • 71
0

I actually created a tool yesterday that helps with this problem https://www.npmjs.com/package/react-use-compare-debugger.

The idea is that by including a simple useCompareDebugger("myComponent", props) it will automatically log changes to props each render. Within here, the key bit is it details whether values are referentially equal, which is how React does shallow comparisons to determine when it should re-render.

enter image description here

Ian
  • 33,605
  • 26
  • 118
  • 198