React Hook – Função assíncrona no useEffect

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!