Stewart Anderson
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>

);

}

)

    Stewart Anderson

    Written by