WebFadoni, programação, notícias, tudo sobre o mundo da programação e da tecnologia, você vai encontrar aqui no WebFadoni.

WebFadoni
28/Jun/2022 09:52

Como usar a função assíncrona em useEffect?

No React, todos nós devemos ter usado o hook useEffect que é executado após realizar atualizações do DOM e nos ajuda a realizar alguma operação após a renderização.

WebFadoni

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.