Como utilizar async/await com useEffect no React: o poder do IIFE
Hoje em dia, a maioria das aplicações web fazem uso de APIs externas para buscar ou enviar dados. No React, o hook useEffect é usado para lidar com a lógica de efeitos colaterais, como fazer chamadas API. Com a ajuda das funções assíncronas async/await, podemos fazer chamadas de API de maneira assíncrona e esperar sua resposta antes de atualizar o estado da nossa aplicação.
Entretanto, quando utilizamos o async/await dentro do useEffect, precisamos lidar com alguns comportamentos indesejados, como a necessidade de criar uma função assíncrona separada dentro do useEffect, o que pode deixar nosso código menos legível. É aqui que o IIFE pode ajudar.
O IIFE, como mencionado anteriormente, é uma função auto-executável. Quando usado dentro do useEffect, podemos declarar a função assíncrona dentro dele e, em seguida, chamá-la imediatamente dentro do IIFE, aguardando a resposta antes de atualizar o estado da nossa aplicação. Isso ajuda a manter nosso código mais organizado e fácil de ler.
Para utilizar o IIFE com o async/await dentro do useEffect, devemos criar uma função dentro do useEffect que retorne a função assíncrona que fará a chamada API. Em seguida, podemos envolver essa função em um IIFE, que executará a função imediatamente e aguardará sua resposta antes de atualizar o estado da nossa aplicação.
Vamos dar um exemplo prático: suponha que queremos buscar os dados de um usuário em uma API externa. Podemos criar uma função assíncrona dentro do useEffect que faz a chamada API e retorna os dados do usuário. Em seguida, podemos envolver essa função em um IIFE e aguardar sua resposta antes de atualizar o estado da nossa aplicação com os dados do usuário.
import React, { useEffect, useState } from "react";
export const PageIIFE = () => {
const [pokeData, setPokeData] = useState<{ name: string }[]>([]);
useEffect(() => {
(async () => {
const response = await fetch("https://pokeapi.co/api/v2/pokemon");
const data = await response.json();
setPokeData(data.results);
})();
}, []);
return (
<div> {pokeData &&
pokeData.map((pokemon) => <p key={pokemon.name}>{pokemon.name}</p>)}
</div> );
};
Em resumo, o IIFE pode ser uma ferramenta útil para lidar com funções assíncronas dentro do useEffect no React. Ele nos permite executar funções assíncronas imediatamente e aguardar sua resposta antes de atualizar o estado da nossa aplicação, tornando nosso código mais organizado e fácil de ler. Com a ajuda das funções assíncronas async/await e do IIFE, podemos lidar com chamadas API de maneira assíncrona e eficiente no React.
Me siga no linkedin para mais conteúdos!