Chamada de função assíncrona sem await no useEffect | React e Node.js: consumindo APIs no React no projeto full stack

// 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… }

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.