I have the following script in my VueJs2 Store Config, and I suspect that the if statement below is causing extra load, even if not triggered, but I'm unsure:

   if(response.status === 204) {
  addToastMessage(I18n.t('library.withdrawal.errors.already_noted'), 'is-info');
  createDiv();
  const btn = document.createElement("button");
  addBtnAttributes(btn);
  btn.addEventListener("click", function() 
  { 
    commit('changeBookLoading', true);
    fetchNextTicket(response);
    commit('changeBookLoading', false);
  });
}

Being new to testing in JS in general, I would like to hear suggestions as to the best methods of benchmarking and debugging this further, any tips appreciated.

Full function:

 function loadBook(commit, dispatch, method, id=null) {
  commit('changeBookLoading', true);
  dispatch(method, id)
  .then((response) => {

     if(response.status === 204) {
  addToastMessage(I18n.t('library.withdrawal.errors.already_noted'), 'is-info');
  createDiv();
  const btn = document.createElement("button");
  addBtnAttributes(btn);
  btn.addEventListener("click", function() 
  { 
    commit('changeBookLoading', true);
    fetchNextTicket(response);
    commit('changeBookLoading', false);
  });
}
    const bookId = response.data[0].localBook.id;

    if (bookId !== locationBookId()) {
      history.pushState({}, `Book ${bookId}`, `/lib/book/${bookId}`);
    }

    commit('changeCurrentBookId', ticketId);
    commit('changeBookEi', null);
    commit('changeCurrentBook', null);
  })
  .catch((err) => {
    // show some global error
  })
  .finally(() => commit('changeLibraryLoading', false));
}