Reactjs Async functions - function not finishing before next one starts - reactjs

Question

I am trying to build a recipe database. I created a function for firebase that allows you to upload a photo to the storage and then get the url for that photo.
const handleUpload = async () => {
const storage = firebase.storage();
const uploadTask = storage.ref(`images/${image.name}`).put(image);
uploadTask.on(
firebase.storage.TaskEvent.STATE_CHANGED,
(snapshot) => {},
(error) => {
console.log(error);
},
() => {
storage
.ref("images")
.child(image.name)
.getDownloadURL()
.then((url) => {
setImageUrl(url);
console.log(url);
});
}
);
};
Then I have a form where on the onSubmit, the photo upload function is supposed to fire so it can set the URL in the state, then fire the full upload which uploads the whole recipe to firebase with the url included. It is being handled inconsistently where sometimes it works and sometimes it doesn't. I have been trying different ways to make it work, but nothing seems to make it work perfectly. Here is the current onSubmit function:
onSubmit={async (values) => {
await handleUpload().then(() => {
createRecipe(values, imageUrl)
})
}}
Any help is much appreciated!

Answer 1

React updates state async. You code relies on the fact that the state update setImageUrl(url) will be handled before createRecipe is called.
But there is no guarantee for that. That's basically a race between reacts internal dealings with state update, and your chain of async function.
Better to make handleUpload return a promise to the URL.
const handleUpload = async () => {
return new Promise((resolve, reject) => {
const storage = firebase.storage();
const uploadTask = storage.ref(`images/${image.name}`).put(image);
uploadTask.on(
firebase.storage.TaskEvent.STATE_CHANGED,
(snapshot) => {},
(error) => {
reject(error);
},
() => {
storage
.ref("images")
.child(image.name)
.getDownloadURL()
.then((url) => {
resolve(url);
});
}
);
}
};
This way handleUpload will actually return the url when you await it.
onSubmit={async (values) => {
await handleUpload().then((url) => {
createRecipe(values, url)
})
}}
Also note that mixing async/await and then/catch/finally is considered bad practice.
I strongly recommend going with async/await only when you can.
onSubmit={async (values) => {
try {
const url = await handleUpload()
createRecipe(values, url)
} catch (err) {
console.log(err)
}
}}