I have a class component, called ListOfItems.js, that lists a bunch of objects like so:

class ListOfItems extends Component {
  construction (props) {
    super(props);
    this.state = {
      objectList: []
    }
  }
}

// This gets the list of objects to display
componentDidMount() {
   this.getObjectList();
}

componentDidUpdate(_prevProps, prevState) {

  if( this.state.ObjectList !== prevState.ObjectList) {

     // this is called infinitely
     console.log("entered");
     this.getObjectList();
  }
}

getObjectList = () => {
  const input = { id_for_this_list: id }

  fetch( connectToApi, {
     method: "PUT",
     headers: { //stuff}
     body: JSON.stringify(input)
  })
     .then(res => //)
     .then(result => //)
     .catch(err=>{console.error(err)});
}
     

Inside of Object.js (the file for each object displayed in ListOfItems), I have a delete functionality, where if the user selected the "x" icon on the object, that object is deleted from the list. An instance of the Object.js inside of ListOfItems.js looks like this:

{this.state.objectList.map(item) => {
  <Object 
    objectList={this.objectList}
    data={item}
    //few other props here
  >
}

Once I enter this ListOfItems.js, the componentWillUpdate is called infinitely, even with the conditional. I'd like it to be called only once -- when the user deletes an Object on the ListOfItems page.