Waiting for submit to complete without persistance

[sinanspd]

I have a table where the last column is a button that triggers an action which in turn queries the DB, returns a result and downloads the result as a csv. In order for the data to be processed and the download the start, I need the submit to complete so there is (correct) data to process.

Let me start by saying that I have read this issue #5023

and more specifically this answer:

#5023 (comment)

which provides a nice solution to this.

However, this solution memorizes the deferred promise using useMemo, which means a new button is clicked, it simply returns the cached data and doesn't perform the new call.

I tried two different things

1. I tried adding an arbitrary dependency into useMemo and updating this value inside _submit = useCallback( ...) to force construction of a new Promise on each submit, however this doesn't seem to work

2. I tried removing useMemo all together however this results in a strange behavior. The first click of a button, resolves the promise but doesn't actually trigger the .then() block. The second click returns the result from the first click, the third click from the second and so on.. Long story short, the downloaded data is dragging behind by one invocation. I haven't been able to track down the reason behind this

I would appreciate any help or pointers on what the right way of doing this would be. The only thing that is changed from the answer above is my doSubmit function, which is below:

  const doSubmit = useCallback(
    (m) => {
      // console.log('doSubmit');
      // e.preventDefault();
    
      let fd = new FormData()
      fd.append("product", m.product)
      fd.append("option", m.option)
      fd.append("variant", m.variant)

      submit(fd, {method: "POST", encType: "multipart/form-data"}).then(
        (data) => {
          let ordersArray = data!.orders.map(
            ({id, shop, productId, variant, show, customer, time}, index) => {
              let ordercustomer = data!.customers.filter(a => a.id == customer)[0]
              return [id, time, ordercustomer.displayName, ordercustomer.email, ordercustomer.phone, "-"]
            })
      
          let ordersArraywHeaders = [["ID", "Date", "Customer", "Email", "Phone", "Order Total"]].concat(ordersArray)
          let csv = arrayToCsv(ordersArraywHeaders)
          downloadBlob(csv, data!.orders[0].show  + "-" + data!.orders[0].variant  + "-orders.csv", 'text/csv;charset=utf-8;')
        }
      );
    },
    [submit, arrayToCsv, downloadBlob]
  );

[sinanspd]

I am not sure if this is the right way of doing this but useState seems have fixed the issue

const [currentDeferred, setCurrentDeferred] = useState(() => deferred());