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;