React hooks, update after multiple promises execution for bulk processes - reactjs

Question

I am working on a component that reads a CSV file and sends a request per every line on the file. The process works great but I am trying to show feedback as the lines get successfully posted. The problem is that using the useState hook, the set function gets passed the moment on calling the function and not after each promise has been resolved. So I cannot append to the successful results array, the array keeps getting replaced with the last successful call.
The API calls are debounced by one second in order to prevent an overload to the server.
import React, {useState} from "react";
import CSVReader from "react-csv-reader";
import {post} from "../api";
function App() {
const [inserts, setInserts] = useState([])
const callApi = async (x) => {
let item = {
date: x.date,
value: x.value,
};
await post(`add-items`, item);
setInserts([...inserts, item])
};
const debouncedApiCall = (body, delay) => {
return new Promise((resolve) => {
const handler = () => callApi(body).then((x) => resolve(x));
setTimeout(handler, delay);
});
};
const insert = async (rows) => {
let timer = 0;
await Promise.all(
rows.map(async (x) => {
timer++;
return await debouncedApiCall(x, timer * 1000);
})
);
};
let onFileLoaded = (data) => {
insert(data).then((x) => console.log(x));
};
return (
<div>
<CSVReader onFileLoaded={onFileLoaded}/>
{JSON.stringify(inserts)}
</div>
);
}
export default App;

Answer 1

When your call API function is called, within its closure it captures the state of inserts. This means, that inserts is not always up to date. What you end up with is called a "stale closure".
To get around this, the mutation function provided by the useState method can accept a callback function. This callback function can recieve the latest state when calling the function. This is helpful in async operations.
your callApi function will become
const callApi = async (x) => {
let item = {
date: x.date,
value: x.value,
};
await post(`add-items`, item);
setInserts(prevState => [...prevState , item]) //prevState gets the latest state of inserts when setInserts is called
return (x); //will return this value once this async function finishes. similar to resolve(x)
};
I cant exactly debug your code, but I would think there is an unnecessary step. you should be able to change your insert function to await all your callApi's, and just return x from your callApi function (as I added above).
const insert = async (rows) => {
let timer = 0;
await Promise.all(
rows.map((x) => {
return callApi(x); //Promise.All wants an array of promises. async functions return a promise
})
);
};
As a side note, Promise.all returns a promise with the actual array results of all your promises results. You can fetch them by adding a .then to the Promise.All and remove the async from the insert function, or await the result.
Async Based: insert returns a promise, so you will need to handle that in the calling function.
const insert = async (rows) => {
let timer = 0;
const results = await Promise.all(
rows.map((x) => {
return callApi(x); //Promise.All wants an array of promises. async functions return a promise
})
);
return results; //array of all your x values for each row
};
None-async based: end of line, insert is the calling function
const insert = (rows) => {
let timer = 0;
Promise.all(
rows.map((x) => {
return callApi(x); //Promise.All wants an array of promises. async functions return a promise
})
).then((result) => {
//result is an array of all x values according to rows
});
};