Uso de Async/Await en funciones de renderizado de React: un enfoque alternativo

La programación asincrónica a menudo se encuentra en aplicaciones React, particularmente cuando se trata de aplicaciones externas. fuentes de datos. Sin embargo, usar async y await directamente dentro de la función de renderizado de React puede generar resultados inesperados.

Para incorporar efectivamente llamadas asincrónicas en React, un enfoque común es utilizar técnicas de administración de estado. Esto implica obtener datos en un método de ciclo de vida separado, como componenteDidMount o usar enlaces como useEffect, y actualizar el estado una vez que los datos estén disponibles.

Considere el siguiente ejemplo:

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}
    ))}
  
);

En este enfoque, el componente ParentThatFetches obtiene datos de forma asincrónica y actualiza su estado en consecuencia. Una vez que los datos están disponibles, representa el componente secundario, que muestra los datos.

Enfoque alternativo: componentes del lado del servidor

Componentes del servidor React, introducidos en React 18 , proporciona otro enfoque para manejar datos asincrónicos en aplicaciones React. A diferencia del modelo tradicional de renderizado del lado del cliente, los componentes de React Server se renderizan en el servidor, lo que le permite recuperar y procesar datos antes de que el HTML se envíe al cliente.

Aquí hay un ejemplo actualizado que aprovecha los componentes de 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}
          
    
  );
}

En este ejemplo, la función getAddressData recupera las direcciones de forma asincrónica en el servidor. Luego, la función GeoServerComponent recibe las direcciones como accesorios y representa el HTML necesario en el servidor. Este enfoque garantiza que los datos estén listos antes de que se envíe el HTML al cliente, resolviendo los problemas encontrados al usar async y await directamente en la función de renderizado.