Antes de explorar diferentes maneiras de fazer chamadas assíncronas dentro do useEffect, vamos discutir o problema por trás disso.

Por que não devemos usar async palavra-chave com useEffect?

const [state, setState] = useState(0)
useEffect(async () => {
	await setState((state) => state + 1);
}, []);  

O trecho de código acima dará erro porque a função assíncrona retorna a Promise e o useEffect não espera que a função de retorno de chamada retorne a Promise. Ele deve retornar nada ou uma função.

Como podemos chamar uma função assíncrona dentro de useEffect? ?

Para fazer a chamada assíncrona dentro do hook useEffect, podemos usar as seguintes abordagens.

Definindo a função assíncrona dentro de useEffect.

useEffect(() => {
  const fetchData = async()=> {
    const data = await getData()
    return data
  }
  fetchData()
}, []);

Definindo a função assíncrona fora do useEffect.

const [state, setState] = useState(0)

const fetchData = useCallback(async()=> {
  const data = await getData();
  setState(data)
}, [])

useEffect(() => {
  fetchData()
}, [fetchData]);

Nesse caso, precisamos envolver nossa função assíncrona em useCallback para mapeá-la com matriz de dependência.

Nota - Se não envolvermos a função usando useCallback gancho, ela será renderizada novamente a cada atualização, o que resultará no acionamento do gancho useEffect novamente.

Eu usei essas duas abordagens para usar a função assíncrona com useEffect. Sinta-se à vontade para adicionar qualquer ponto importante ou outra abordagem em relação a este tópico.