react-armory-prop-change-counter
This package exports a React Component that displays the number of times that its props have changed (using reference equality). Use this component to check that your props are only changing when they should.
Usage example
To see if an element's props are changing, add a PropChangeCounter
element with identical props, then run your app. The prop change counter component will display the number of times that each prop has changed.
For example, you could check if the props on this <input />
are changing on each render by adding a <PropChangeCounter />
with identical props:
Component { superprops thisstate = email: '' } { return <div> <input placeholder="Email" value=thisstateemail onChange= this /> <PropChangeCounter constant="this doesn't change" value=thisstateemail onChange= this /> </div> } ReactDOM
You can see this example live at When to use Arrow Functions.
Why?
Some React components use shouldComponentUpdate or PureComponent to prevent unnecessary renders. But this only works if the props don't change! So if a pure component is updating when it shouldn't, you can add a <PropChangeCounter>
to find the culprit.
This is explained in detail (with live examples) at When to use Arrow Functions.