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!