Использование Async/Await в функциях рендеринга React: альтернативный подход

Асинхронное программирование часто встречается в приложениях React, особенно при работе с внешними источники данных. Однако использование async и await непосредственно в функции рендеринга React может привести к неожиданным результатам.

Чтобы эффективно включить асинхронные вызовы в React, обычным подходом является использование методов управления состоянием. Это предполагает получение данных в отдельном методе жизненного цикла, таком как компонентDidMount, или использование перехватчиков, таких как useEffect, и обновление состояния после того, как данные станут доступны.

Рассмотрим следующий пример:

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

При таком подходе компонент ParentThatFetches асинхронно извлекает данные и соответствующим образом обновляет свое состояние. Как только данные становятся доступными, он отображает дочерний компонент, который отображает данные.

Альтернативный подход: серверные компоненты

Серверные компоненты React, представленные в React 18 , предоставляют другой подход к обработке асинхронных данных в приложениях React. В отличие от традиционной модели рендеринга на стороне клиента, серверные компоненты React визуализируются на сервере, что позволяет вам получать и обрабатывать данные до отправки HTML клиенту.

Вот обновленный пример, в котором используются серверные компоненты 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}
          
    
  );
}

В этом примере функция getAddressData асинхронно извлекает адреса на сервере. Затем функция GeoServerComponent получает адреса в качестве реквизита и отображает необходимый HTML на сервере. Этот подход гарантирует, что данные будут готовы до того, как HTML будет отправлен клиенту, решая проблемы, возникающие при использовании асинхронности и ожидания непосредственно в функции рендеринга.