Why is shouldComponentUpdate not working correctly after using setState in a function?

Question

React

there is a component

import React, {Component} from 'react';

import RaisedButton from 'material-ui/RaisedButton';

class BrandModels extends Component {

  constructor(props) {

    super(props);

    this.state = { items : [ undefined ] }


  }


  shouldComponentUpdate( nextProps, nextState ) {

    console.log( nextState.items, this.state.items )

    if ( nextState.items != this.state.items)
      return true;

    return false;

  }

  addGroup(){

    let items = this.state.items;

    items.push( undefined );

    this.setState({ items : items })

  }
  render() {
    return (
      <div
        className={country_brand_mod_list">
        
        <div className="row">
          <div className="col-12">
            <RaisedButton
              label={window._sharedData.loc.app.add}
              primary={true}
              onClick={this.addGroup.bind(this)}
            />
          </div>
        </div>
      </div>
    )
  }

}

export default BrandModels;

after clicking on the button, 1 element is added to the array of the items
state , but, in shouldComponentUpdate nextState.items , for some reason it is always equal to this.state.items

Answer 1

in shouldComponentUpdate nextState.items for some reason is always equal to this.state.items

Of course - you do not create a new array.
Replace

let items = this.state.items;
items.push( undefined );

on the
let items = [ ...this.state.items, undefined ]