React shouldComponentUpdate doesn't detect array length change? - reactjs

Question

When Changing the length of an array passed through props, the 'shouldComponentUpdate' function can't detect the array length change.
I know that 'shouldComponentUpdate' can't detect changes in nested objects properties, but this is a simple array length!! is this a bug in React??
https://jsfiddle.net/ashraffayad/cLz1q8sv/
var ArrTest = React.createClass({
render: function() {
return <div >{this.props.arr}< /div>;
},
shouldComponentUpdate: function(nextProps) {
console.log(this.props.arr.length, nextProps.arr.length); // same length !!!
return true;
}
});
// - - - - app component
var App = React.createClass({
getInitialState: function() {
return {
arr: [1, 2, 3, 4]
};
},
render: function() {
return <ArrTest arr={ this.state.arr } />;
},
componentDidMount: function() {
var self = this;
setTimeout(function() {
self.state.arr.push(7);
self.setState(self.state);
}, 2000);
}
});
ReactDOM.render( < App /> ,
document.getElementById('container')
);

Answer 1

It's not a bug in React, it's an issue with your code.
You should never modify this.state values directly.
Try this:
componentDidMount: function() {
var self = this;
setTimeout(function() {
self.setState({arr: self.state.arr.concat([7])});
}, 2000);
}
It works. Because React doesn't clone props as it passes them down, and so changes to an array get reflect on all of its references.
I suggest you read more about immutability in Javascript.
In short, never do this.state.[anything].push/pop/shift/unshift(), never.
Do something like this instead:
var arr = this.state.arr.slice(); // Create a copy of the array
arr.push(2); // do whatever you want to do
this.setState({ arr: arr }); // pass changes to React

Answer 2

Just because you have two references (this.props.arr, nextProps.arr) does not mean you have two instances.
When you mutate the array with push, you modify the instance. When shouldComponentUpdate runs it compares the references and because they point to the same instance, the array lengths are the same.
If you want to pass down a new array with different elements or properties, then you need to create a new array too.
It's quite easy to substitute push for concat.
setTimeout(function() {
self.setState({
arr: self.state.concat([7])
}, 2000);

Answer 3

You're referencing the same array in your if, ie., you are modifying the same array instead of creating a new one and you're working two references to the same array in shouldComponentUpdate.
You should always treat props and state as immutable and therefore creating a new array with .concat instead of pushing onto the array in state will fix your current issue.
setTimeout(function () {
this.setState({arr: this.state.concat([7])});
}.bind(this), 2000);
If you'd have done this.props.arr === nextProps.arr within shouldComponentUpdate you'd see that the arrays would be equal to each other.