I’m trying to understand something about the following behavior for promises.
When I push a promise to the promises array, the console.log is executed. I think this is because as I push, I actually execute the promises.
But then when I try doing Promise.all, I don’t see the same console.log messages being printed, it’s just silence. I can see the return values of each resolve if I destructure them from the Promise.all and console.log them, but, again, I don’t see the console.log messages (such as Printed for promise A during push).
Why is this happening?
import * as React from "react";
const promiseA = async ({}) => {
return await new Promise((resolve) => {
console.log("Printed for promise A during push");
resolve("promise a resolved");
});
};
const promiseB = async ({}) => {
return await new Promise((resolve) => {
console.log("Printed for promise B during push");
resolve("promise b resolved");
});
};
const Component = React.memo(() => {
React.useEffect(() => {
init();
}, []);
const init = React.useCallback(async () => {
let promises = [];
promises.push(promiseA({})); // 'Printed for promise A during push'
promises.push(promiseB({})); // 'Printed for promise B during push'
await Promise.all(promises); // silence, nothing is printed
/*
// And if I do the following, I see the strings in `resolve`:
const [responseA, responseB] = await Promise.all(promises);
console.log("responseA", responseA); // responseA promise a resolved
console.log("responseB", responseB); // responseB promise a resolved
*/
}, []);
return <div />;
});
export default Component;
