React レンダー関数での Async/Await の使用: 代替アプローチ

非同期プログラミングは、React アプリケーション、特に外部を扱う場合によく発生します。データソース。ただし、React のレンダリング関数内で async と await を直接使用すると、予期しない結果が生じる可能性があります。

React に非同期呼び出しを効果的に組み込むための一般的なアプローチは、状態管理テクニックを利用することです。これには、componentDidMount などの別のライフサイクル メソッドでデータを取得するか、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 18 で導入された React サーバー コンポーネントは、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 がクライアントに送信される前にデータの準備が整っていることが保証され、レンダリング関数で直接 async と await を使用するときに発生する問題が解決されます。