Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Chamada de função assíncrona sem await no useEffect

Referente ao curso React e Node.js: consumindo APIs no React no projeto full stack, no capítulo Requisições com Axios e atividade Serviço de livros na Home

por Estudante
| 265.3k xp | 264 posts

Olá!

Na aula é comentado que o useEffect não lida bem com func. assíncronas, porém toda func. que chama uma func. assíncrona não deveria ter pelo menos o await antes da chamada da func, ou seja, dentro do useEffect, não deveria ser await fetchLivros() ?

// código omitido…

function Pesquisa() {
    const [livrosPesquisados, setLivrosPesquisados] = useState([])
    const [livros, setLivros] = useState([])

    useEffect(() => {
        fetchLivros()
    }, [])

    async function fetchLivros() {
        const livrosDaAPI = await getLivros()
        setLivros(livrosDaAPI)
    }

// código omitido…
}

Por acaso o useEffect aplica esse await "internamente" (por isso não precisa ser considerado), ou algo do gênero?

Desde já obrigado!

1 resposta
solução!
por Lorena Garcia
| 9124k xp | 13547 posts
Alura Scuba Team Suporte Educacional

Oi, tudo bem?

A sua pergunta é muito pertinente. Na verdade, o useEffect não aplica o await "internamente". O que acontece é que o useEffect não aceita diretamente uma função assíncrona como argumento. Isso ocorre porque funções assíncronas retornam uma Promise e o useEffect espera uma função que retorne nada ou uma função de limpeza.

No seu exemplo, a função fetchLivros é chamada dentro do useEffect, mas o await é aplicado dentro da própria função fetchLivros, e não no useEffect. Isso significa que o useEffect está chamando uma função, mas não está preocupado com o tempo que essa função leva para concluir. O await dentro de fetchLivros garante que a função espere a chamada getLivros() ser resolvida antes de continuar.

Veja isso:

useEffect(() => {
    async function fetchLivros() {
        const livrosDaAPI = await getLivros();
        setLivros(livrosDaAPI);
    }
    fetchLivros();
}, []);

Nesse caso, fetchLivros é uma função assíncrona que está sendo chamada dentro do useEffect. O await é usado dentro de fetchLivros para esperar a resolução da Promise retornada por getLivros antes de continuar. O useEffect apenas chama fetchLivros e não se preocupa com quanto tempo fetchLivros leva para concluir.

Espero ter ajudado.

Um abraço e bons estudos.