¿Necesito utilizar await para acciones asíncronas en componentes de React?
Creé esta tienda:
export class CommentStore {
comments = [];
constructor() {
makeAutoObservable(this, {}, { autoBind: true });
}
async loadPostComments(postId: number): Promise<void> {
const res = await API.loadPostComments(postId);
runInAction(() => {
this.comments = res;
});
}
async sendComment(postId: number, comment: Comment): Promise<void> {
try {
await API.sendComment(postId, comment);
await this.loadPostComments(postId);
return true;
} catch (err) {
console.log('oops');
}
}
}
¿Es necesario usar “await” en componentes de React? Por ejemplo:
useEffect(() => {
(async function () {
await loadPostComments(postId);
})();
}, [loadPostComments, postId]);
Pero esto también funciona bien:
useEffect(() => {
loadPostComments(postId);
}, [loadPostComments, postId]);
Lo mismo ocurre con “sendComment” onClick:
onClick={() => {sendComment(postId, comment)}}
onClick={async () => {await sendComment(postId, comment)}}
Entonces, ¿es necesario usar “await” en estas situaciones?
davy.ai
Sí, es necesario usar
await
en estas situaciones. Los métodosloadPostComments()
ysendComment()
son funcionesasync
que devuelven una promesa. Para esperar a que la promesa se resuelva antes de continuar con otras operaciones, se necesitaawait
.Usar
await
también asegura que cualquier error lanzado durante la ejecución de las funcionesasync
sea capturado en un bloquetry-catch
, como se ve en el métodosendComment()
. Si no se utilizaawait
, el código puede continuar ejecutándose antes de que se resuelva la promesa, lo que puede provocar un comportamiento inesperado o errores.