Usando Async/Await em funções de renderização React: uma abordagem alternativa

A programação assíncrona é frequentemente encontrada em aplicativos React, especialmente ao lidar com recursos externos fontes de dados. No entanto, usar async e await diretamente na função de renderização do React pode levar a resultados inesperados.

Para incorporar efetivamente chamadas assíncronas no React, uma abordagem comum é utilizar técnicas de gerenciamento de estado. Isso envolve buscar dados em um método de ciclo de vida separado, como componentDidMount ou usar ganchos como useEffect, e atualizar o estado assim que os dados estiverem disponíveis.

Considere o seguinte exemplo:

class ParentThatFetches extends React.Component {
  constructor() {
    this.state = { data: null };
  }

  componentDidMount() {
    fetch("/some/async/data")
      .then(resp => resp.json())
      .then(data => this.setState({ data }));
  }

  render() {
    return this.state.data ? (
      
    ) : null;
  }
}

const Child = ({ data }) => (
  
    {data.map((x, i) => (
      {x}
    ))}
  
);

Nesta abordagem, o componente ParentThatFetches busca dados de forma assíncrona e atualiza seu estado de acordo. Assim que os dados estiverem disponíveis, ele renderiza o componente Filho, que exibe os dados.

Abordagem alternativa: componentes do lado do servidor

React Server Components, introduzidos no React 18 , fornecem outra abordagem para lidar com dados assíncronos em aplicativos React. Ao contrário do modelo tradicional de renderização do lado do cliente, os componentes do React Server são renderizados no servidor, permitindo que você busque e processe dados antes que o HTML seja enviado ao cliente.

Aqui está um exemplo atualizado que aproveita os componentes do React Server:

import Geocode from "react-geocode";
import _ from "lodash-es";

const getAddressData = async (getCompanyUserRidesData = []) =>
  Promise.all(
    getCompanyUserRidesData.map(async (userRides) => {
      const addr = await Geocode.fromLatLng(22.685131, 75.873468);
      const address = addr.results[0].formatted_address;
      const email = _.get(userRides, "driverId.email", "");
      const mobile = _.get(userRides, "driverId.mobile", "");
      return { address, email, mobile };
    })
  );

async function GeoServerComponent({ phase, getCompanyUserRidesData }) {
  const data = await getAddressData(getCompanyUserRidesData);
  return (
    
        {data.map(({ address, email, mobile }, index) => (
          
        ))}
      

      

            
{address}
            
Goa
            
asdsad
            
{email}
            
{mobile}
          
    
  );
}

Neste exemplo, a função getAddressData busca os endereços de forma assíncrona no servidor. A função GeoServerComponent então recebe os endereços como adereços e renderiza o HTML necessário no servidor. Essa abordagem garante que os dados estejam prontos antes que o HTML seja enviado ao cliente, resolvendo os problemas encontrados ao usar async e await diretamente na função de renderização.