रिएक्ट रेंडर फ़ंक्शंस में Async/Await का उपयोग करना: एक वैकल्पिक दृष्टिकोण

अतुल्यकालिक प्रोग्रामिंग अक्सर रिएक्ट अनुप्रयोगों में सामने आती है, खासकर जब बाहरी से निपटते हैं डेटा स्रोत। हालाँकि, रिएक्ट के रेंडर फ़ंक्शन के भीतर सीधे async और wait का उपयोग करने से अप्रत्याशित परिणाम मिल सकते हैं।

रिएक्ट में एसिंक्रोनस कॉल को प्रभावी ढंग से शामिल करने के लिए, राज्य प्रबंधन तकनीकों का उपयोग करना एक सामान्य तरीका है। इसमें डेटा को एक अलग जीवनचक्र विधि में लाना शामिल है, जैसे कि कंपोनेंटडिडमाउंट या यूज़इफ़ेक्ट जैसे हुक का उपयोग करना, और डेटा उपलब्ध होने के बाद स्थिति को अपडेट करना।

निम्न उदाहरण पर विचार करें:

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 घटक अतुल्यकालिक रूप से डेटा प्राप्त करता है और तदनुसार अपनी स्थिति को अपडेट करता है। एक बार डेटा उपलब्ध होने के बाद, यह चाइल्ड घटक प्रस्तुत करता है, जो डेटा प्रदर्शित करता है।

वैकल्पिक दृष्टिकोण: सर्वर-साइड घटक

रिएक्ट सर्वर घटक, रिएक्ट 18 में पेश किया गया , रिएक्ट अनुप्रयोगों में अतुल्यकालिक डेटा को संभालने के लिए एक और दृष्टिकोण प्रदान करें। पारंपरिक क्लाइंट-साइड रेंडरिंग मॉडल के विपरीत, रिएक्ट सर्वर घटकों को सर्वर पर प्रस्तुत किया जाता है, जिससे आप क्लाइंट को HTML भेजे जाने से पहले डेटा प्राप्त कर सकते हैं और संसाधित कर सकते हैं।

यहां एक अद्यतन उदाहरण दिया गया है जो रिएक्ट सर्वर घटकों का लाभ उठाता है:

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 फ़ंक्शन सर्वर पर एसिंक्रोनस रूप से पते प्राप्त करता है। जियोसर्वरकंपोनेंट फ़ंक्शन तब पते को प्रॉप्स के रूप में प्राप्त करता है और सर्वर पर आवश्यक HTML प्रस्तुत करता है। यह दृष्टिकोण सुनिश्चित करता है कि क्लाइंट को HTML भेजे जाने से पहले डेटा तैयार है, async का उपयोग करते समय आने वाली समस्याओं का समाधान किया जाता है और सीधे रेंडर फ़ंक्शन में प्रतीक्षा की जाती है।