Otimizando o Desempenho: Como Utilizar o Promie.all para Aprimorar Requisições Assíncronas em Seu Projeto React
- #JavaScript
- #Next.js
- #React
Fala galera, quero compartilhar uma coisa bem legal com vocês: o Promie.all. Esse recurso possibilita a execução de várias requisições assíncronas simultaneamente.
Estou trabalhando em uma funcionalidade que requer a realização de duas requisições assíncronas, além de uma que já está em andamento. Então, decidi realizar uma comparação de desempenho para mostrar como uma simples alteração pode trazer grandes melhorias de performance para os projetos.
Antes, eu tinha o seguinte código em um useEffect, que era responsável por realizar as requisições necessárias na minha página. Normalmente, outros membros da equipe também adicionariam outras requisições a esse useEffect.
useEffect(() => {
loadCancellations();
MotivoCancelamentoService.getAll().then((response) => {
setMotivosCancelamento(response.data.data.filter((row: any) => {
if (row.flag_ativo == 1) {
return ({
id: row.id,
nome: row.nome,
flag_ativo: row.flag_ativo
});
}
}))
}).catch(error => {
console.error(error);
})
ProdutoService.getAll({}).then((response) => {
setProdutos(response);
});
ProdutoTipoService.getAll({}).then((response) => {
setProdutosTipo(response);
})
}, []);
Desse forma, eu obtive o seguinte resultado:
Então, decidi criar uma função única que busca os dados e executar essa função no meu useEffect. Com a refatoração, o código ficou assim:
const fetchData = async () => {
try {
const [produtos, produtosTipo, motivoCancelamento] = await Promise.all([
ProdutoService.getAll({}),
ProdutoTipoService.getAll({}),
MotivoCancelamentoService.getAll()
]);
setMotivosCancelamento(motivoCancelamento.data.data.filter((row: any) => {
if (row.flag_ativo == 1) {
return ({
id: row.id,
nome: row.nome,
flag_ativo: row.flag_ativo
});
}
}))
setProdutos(produtos);
setProdutosTipo(produtosTipo);
} catch (e) {
console.log(e)
}
};
useEffect(() => {
loadCancellations();
fetchData();
}, []);
E veja o resultado:
Ficou muito legal, não é mesmo? Então, fica a dica: sempre que precisar fazer uma requisição assíncrona, utilize o Promise.all, mesmo que seja apenas uma. Isso facilitará futuras implementações caso sua tela precise de mais dados.
