Se você já conhece a mensagem de erro:
“React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing”
Aqui vai a explicação do porque isso acontece e como corrigir.
O problema acontece quando você chama diretamente uma funciona que retorna uma Promise diretamento da função useEffect.
export default function Example() { const [data, setData] = useState(false) useEffect(async () => { let response = await fetch('api/data') //Direct call response = await res.json() setData(response) }, []); return <div>{data}</div> }
A função useEffect espera receber uma função que serve para cancelar ou liberar os recursos.
Para resolver o problema, você deve chamar funções síncronas. Mesmo que esta função seja assíncrona, não há problema.
export default function Example() { const [data, setData] = useState(false) useEffect(() => { const runAsync = async () => { let response = await fetch('api/data') response = await res.json() setData(response) }; runAsync(); }, []); return <div>{data}</div> }
Você poderia cancelar a requisição quando o componente for destruído, porém é assunto para outro artigo (React Hook – Clean Up useEffect).
Obrigado!