Execute tarefas assíncronas com useEffect de forma limpa e segura

De chamar uma API para definir um atraso de tempo limite, tenho certeza que você já questionou como fazer isso corretamente ao usar o gancho React useEffect. Se isso ainda soa confuso, então este artigo é para você. Se não, você pode pelo menos aprender uma abordagem diferente para fazer o trabalho ou se sentir mais confiante ao fazê-lo.

Vou apresentar 3 formas de o fazer de forma segura e arrumada. Mas primeiro, quero mostrar o que você NÃO deve fazer.

O que você NÃO deve fazer ❌

Não faça a tarefa assíncrona diretamente no useEffect, em vez disso, SEMPRE envolva sua tarefa assíncrona em uma função e chame-a apenas do useEffect.

Aqui está um exemplo do que você NÃO deve fazer:

useEffect(async () => {
   await getData();
},[]);

Além disso, fazer o que este exemplo BAD mostrou levaria a um erro React:

Os retornos de chamada de efeito são síncronos para evitar condições de corrida.

Tudo bem, agora estamos seguros para passar para as boas práticas ⬇️

1. Definindo a função assíncrona dentro do gancho

Se você pretende executar uma tarefa assíncrona, para obter alguns dados de uma API por exemplo, e atualizar o estado de carregamento do seu componente, você precisa definir a função dentro do gancho e depois chamá-la:

useEffect(() => {
async function getData() {
    setLoading(false);
    const reponse = await myApi.getSomeGoodData()
    setLoading(true);
   }
getData();
},[]);

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

Se você planeja reutilizar a função assíncrona definida, uma boa ideia é defini-la no corpo do componente funcional, encapsulado pelo useCallbackgancho. Confira:

const getData = useCallback(() => {
    setLoading(false);
    const reponse = await myApi.getSomeGoodData()
    setLoading(true);
}, [])
useEffect(() => {
getData()
},[getData])

3. Definir um intervalo ou tempo limite

Os 2 exemplos anteriores foram focados principalmente em buscar dados e atualizar o estado do componente. Este é para mostrar também um cenário comum para tarefas assíncronas dentro de useEffect que está definindo um intervalo ou um tempo limite.

O truque para isso é SEMPRE limpar o tempo limite e o intervalo definido no arquivo useEffect.

Definir um tempo limite

useEffect(() => {
const timeout = setTimeout(() => {
     // do something
   }, 100)
return () => {
      clearTimeout(timeout);
   }
},[])

useEffect(() => {
const interval = setInterval(() => {
       // do something
  }, 100)
return () => {
      clearInterval(interval);
  }
},[])

Os exemplos acima cobrirão 99,99% das situações assíncronas que você pode encontrar durante o desenvolvimento do React. Apenas lembre-se de estar atento às dependências do efeito. Se você não encontrou o seu caso nos exemplos abaixo, deixe um comentário e eu analisarei.

Obrigado por ler

—- Fernando Abolafio