Utilisation d'Async/Await dans les fonctions de rendu React : une approche alternative

La programmation asynchrone est souvent rencontrée dans les applications React, en particulier lorsqu'il s'agit de tâches externes. sources de données. Cependant, l'utilisation d'async et d'attente directement dans la fonction de rendu de React peut conduire à des résultats inattendus.

Pour intégrer efficacement les appels asynchrones dans React, une approche courante consiste à utiliser des techniques de gestion d'état. Cela implique de récupérer les données dans une méthode de cycle de vie distincte, telle que componentDidMount ou d'utiliser des hooks comme useEffect, et de mettre à jour l'état une fois les données disponibles.

Considérez l'exemple suivant :

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

Dans cette approche, le composant ParentThatFetches récupère les données de manière asynchrone et met à jour son état en conséquence. Une fois les données disponibles, le composant enfant est restitué, qui affiche les données.

Approche alternative : composants côté serveur

Composants serveur React, introduits dans React 18. , fournissent une autre approche pour gérer les données asynchrones dans les applications React. Contrairement au modèle de rendu traditionnel côté client, les composants du serveur React sont rendus sur le serveur, ce qui vous permet de récupérer et de traiter les données avant que le code HTML ne soit envoyé au client.

Voici un exemple mis à jour qui exploite les composants du serveur React :

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

Dans cet exemple, la fonction getAddressData récupère les adresses de manière asynchrone sur le serveur. La fonction GeoServerComponent reçoit ensuite les adresses comme accessoires et restitue le code HTML nécessaire sur le serveur. Cette approche garantit que les données sont prêtes avant que le code HTML ne soit envoyé au client, résolvant ainsi les problèmes rencontrés lors de l'utilisation d'async et d'attente directement dans la fonction de rendu.