A shallow compare is more expensive than no comparison.

It can add up depending on how big is the object and how frequent it is updated.

Which is what Dan's point is - as the developer, you know which parts of your application would benefit from such an optimisation. So don't spray it everywhere.

There is a slight misunderstanding in the question. That post does not mean shallow comparison is expensive.

Here's a brief context before I answer:

The usual behaviour of a React Component is to re-render the component whenever its props or state changes. Now the change does not necessarily mean there is a change in values, instead it could also be same set of values passed again. This usually happens when its Parent Component either refreshes the state or re-renders, due to this, Child Components unnecessarily re-render every time.

To avoid unnecessary re-renders, what React team thought of is to perform a "shallow comparison logic" between new value change (i.e new props/state) and existing values (current props/state) to quickly decide if the component should perform a re-render. This saves the overhead of re-rendering the component, hence the performance boost.

Now coming to the misunderstanding of the post what I mentioned earlier:

The logic of "shallow comparison" in React is done by iterating through the keys of new-values(say A) and check its existence in previous-values(say B) and then it performs shallow comparison on each value of the key present in A and B. So complexity would be -- ~O(n(A)*n(B)). Once this process is performed, then there forms a decision whether to render the component or not.

Now, what the post meant is that if you make every component as pure, then you'd add an overhead of shallow comparison for every component on every re-render instead of directly re-rendering it blindly (usual behaviour). So, the point is, make sure your Component is critical enough to make it PureComponent so that you can avoid its expensive re-renders.

Cheers!

The pure component is needed only when you need to re-render the component whenever any of the state or props value is changed.

And this will not be the case in most cases. You will want to re-render the component only if some or few value of state or props gets changed. And in some cases, you don't even to re-render the component whatsoever the props or state gets change.

So, re-rendering for everything will obviously effect its performance. Guess, loading and loading of sorts of changes.

You're in fact hampering the user. Ah, I want to show you my home. But it's raining continuously.

Once it stops, I will PM with a good picture so you can upload it in your magazine.

Are you good with it?

The reply will obviously be "NO".

---

Take an example with an electric switch which will turn on/off the light. The bulb here is to denote a component. The switch here is to denote the state. If it is on, the bulb will light. There's no additional things. This is only one on and off. So, this will be a good use case for a pure component.

Shallow equality checks do only compare references, which makes them rather cheap.

const x = {};
const y = {};

console.log(x == y);
// prints `false`

This fact also does not change if you use React. However, your twitter post is very misleading. They don't actually mean shallow JS object copies, but an algorithm used by React's PureComponent in one of their methods (see docs):

React.PureComponent’s shouldComponentUpdate() only shallowly compares the objects.

I don't know a lot about React, however I think that this means that they probably have an algorithm, which compares first-level children for equality. I don't know how many elements that sums up to, however it's a loop in JS, which makes it slow - and if you do it for many components, you add up costs in a blocking way.