DEV Community

Cover image for Usando o useEffect de modo assincrono
Rodrigo Alexandre
Rodrigo Alexandre

Posted on

Usando o useEffect de modo assincrono

Eu recebi uns warnings do expo quando implementei os useEffects assincronos do projeto de Aplicativo de Repositórios do curso React Native: utilizando Web API e resolvi que não ia deixá-los no meu projeto rs.

Pesquisando pela documentação do React e alguns sites, encontrei uma recomendação a respeito e vou deixar uma sugestão de como eu fiz no meu código:

O useEffect espera que a função passada para ele retorne uma função de limpeza ou null, mas uma função async não retorna uma dessas coisas. Isso pode causar problemas na hora de lidar com os efeitos colaterais.

Se você chama uma função async dentro do useEffect, ela será executada imediatamente e não será cancelada quando o componente deixar de ser exibido, o que pode causar problemas de desempenho.

Se você chama uma função async dentro do useEffect sem passar um array vazio como segundo argumento, essa função será chamada sempre que o componente for atualizado, o que pode causar problemas de desempenho e resultar em chamadas desnecessárias à API.

Uma maneira mais correta de lidar com seria colocar a lógica de busca de dados em uma função separada e chamá-la dentro do useEffect. E você deve passar o array de dependencias corretamente, para evitar chamadas desnecessárias:

useEffect(() => {
        async function pegarRepos(){
            const resultados = await pegarRepositorioDoUsuarios(route.params.id);
            setRepo(resultados);
        }
        pegarRepos();
    }, [estaNaTela]);COPIAR CÓDIGO
Enter fullscreen mode Exit fullscreen mode

Foi essa maneira que fiz. Como você faria?

Top comments (0)