On React performance, shallowCompare and Javascript equality

While developing a complex ui with React I noticed that performance was being worse than expected. Following the official recommendations I started overriding shouldComponentUpdate and adding shallowCompare.

It turns out it was not enough to solve the problem. In a nested component that was rendering a list of items, adding a new element was causing the update for all of them (and not just them but their whole subtrees). Here it is a JsFiddle illustrating the problem. Look at the console when adding a new element.

The caveat is this:

If the prop is an object but the references are not the same, then equality fails and it gets re-rendered.

One simple solution is to use simple props instead of objects. With the help of the spread operator from ES6 this is quite easy:

Another solution is to use an external library like Immutable.js that has a method to query data equality:

But it can only go so far. If a property/value of the object is a complex object like an array, data equality will still fail: