Aug 22, 2017 · 1 min read
I don’t know much about the internals of React (or more specifically PureComponent) so I didn’t quite understand the reason why the User component instances are re-rendered.
I played with your second example (that does not re-render the User component instances) and I noticed that the problem returns (it will re-render) if I simply re-write User as a function:
function User(props) {
var onDeleteClick = () => {
props.onClick(props.user.id);
};
console.log(`${props.user.name} just rendered`);
return (
<li>
<input type=”button” value=”Delete” onClick={onDeleteClick} />
{props.user.name}
</li>
);
}