ShouldComponentUpdate always returns true, what's wrong? The element is being rendered, how to determine?

Question

JavaScript

screenshot of props storage8.static.itmages.com/i/17/0223/h_1487848793... screenshot
after changes in an element that has a common ancestor, and only state changes there.
Below is the code from the element in which I do not want to render.

shouldComponentUpdate(nextProps, nextState) {
    		console.log('this.props: ', this.props, 'nextProps: ', nextProps);
    		console.log('this.state: ', this.state, 'nextState: ', nextState)
    		if ((this.props === nextProps) && (this.state === nextState)){
              return false
          } else { return true }

    	}
    render(){
      console.log("render FilterForAll")

ps Well, it's kind of a react feature that only the part that has changed is rendered, and not the entire dom as a whole, with such a situation it turns out that the entire virtual dom is rendered again. Or did I misunderstand something?

Answer 1

Unfortunately, this condition does not work:
Even if the content of these objects is the same, from the point of view of js they are different objects and they are not equal. If you want to be able to easily compare objects, then you should look towards immutable structures: https://facebook.github.io/immutable-js/