调试反应。 确定更改了哪个道具

Question

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

Answer 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.

Answer 2

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.