import React, { Suspense } from 'react';

// डेटा लाने का अनुकरण करें (उदाहरण के लिए, एक एपीआई से)
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: 'John Doe', age: 30 });
    }, 2000);
  });
};

// एक रिसोर्स बनाएं जिसका उपयोग सस्पेंस कर सकता है
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise().then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }

      return result;
    },
  };
};

const userData = createResource(fetchData);

// कंपोनेंट जो रिसोर्स से पढ़ता है
const UserProfile = () => {
  const data = userData.read();
  return (
    

      
Name: {data.name}
      
Age: {data.age}
    
  );
};

const App = () => {
  return (
    Loading user data...

इस उदाहरण में:

• `fetchData` एक एसिंक्रोनस डेटा फेचिंग ऑपरेशन का अनुकरण करता है।
• `createResource` एक रिसोर्स बनाता है जिसका उपयोग सस्पेंस डेटा की लोडिंग स्थिति को ट्रैक करने के लिए कर सकता है।
• `UserProfile` `read` मेथड का उपयोग करके रिसोर्स से डेटा पढ़ता है। यदि डेटा अभी तक उपलब्ध नहीं है, तो यह एक प्रॉमिस थ्रो करता है, जो कंपोनेंट को सस्पेंड कर देता है।
• `Suspense` कंपोनेंट `UserProfile` को रैप करता है और एक `fallback` प्रॉप प्रदान करता है, जो कंपोनेंट के सस्पेंड होने पर प्रदर्शित होने वाले UI को निर्दिष्ट करता है।

कोड स्प्लिटिंग के साथ सस्पेंस

सस्पेंस का उपयोग React.lazy के साथ कोड स्प्लिटिंग को लागू करने के लिए भी किया जा सकता है। यह आपको कंपोनेंट्स को केवल तभी लोड करने की अनुमति देता है जब उनकी आवश्यकता हो, जिससे शुरुआती पेज लोड प्रदर्शन में सुधार होता है।

import React, { Suspense, lazy } from 'react';

// MyComponent को लेज़ी लोड करें
const MyComponent = lazy(() => import('./MyComponent'));

const App = () => {
  return (
    Loading component...}>
      
    
  );
};

export default App;

इस उदाहरण में:

• `React.lazy` का उपयोग `MyComponent` कंपोनेंट को लेज़ी लोड करने के लिए किया जाता है।
• `Suspense` कंपोनेंट `MyComponent` को रैप करता है और एक `fallback` प्रॉप प्रदान करता है, जो कंपोनेंट लोड होने के दौरान प्रदर्शित होने वाले UI को निर्दिष्ट करता है।

एरर बाउंड्रीज को समझना

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

एरर बाउंड्रीज की मुख्य अवधारणाएं

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

एरर बाउंड्रीज का बेसिक इम्प्लीमेंटेशन

यहां एक एरर बाउंड्री बनाने का एक सरल उदाहरण है:

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // स्टेट अपडेट करें ताकि अगला रेंडर फॉलबैक UI दिखाए।
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // आप एरर को एक एरर रिपोर्टिंग सर्विस में लॉग भी कर सकते हैं
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // आप कोई भी कस्टम फॉलबैक UI रेंडर कर सकते हैं
      return 
Something went wrong.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

इस उदाहरण में:

• `ErrorBoundary` कंपोनेंट `getDerivedStateFromError` और `componentDidCatch` मेथड्स को परिभाषित करता है।
• `getDerivedStateFromError` तब कॉल किया जाता है जब किसी चाइल्ड कंपोनेंट में कोई एरर होता है। यह यह इंगित करने के लिए स्टेट को अपडेट करता है कि एक एरर हुआ है।
• `componentDidCatch` एक एरर पकड़े जाने के बाद कॉल किया जाता है। यह आपको किसी सर्विस या कंसोल में एरर लॉग करने की अनुमति देता है।
• `render` मेथड `hasError` स्टेट की जांच करता है और यदि कोई एरर हुआ है तो एक फॉलबैक UI प्रदर्शित करता है।

एरर बाउंड्रीज का उपयोग करना

`ErrorBoundary` कंपोनेंट का उपयोग करने के लिए, बस उन कंपोनेंट्स को रैप करें जिन्हें आप इसके साथ सुरक्षित रखना चाहते हैं:

import React from 'react';
import ErrorBoundary from './ErrorBoundary';

const MyComponent = () => {
  // एक एरर का अनुकरण करें
  throw new Error('An error occurred!');
};

const App = () => {
  return (
    
      
    
  );
};

export default App;

इस उदाहरण में, यदि `MyComponent` में कोई एरर होता है, तो `ErrorBoundary` कंपोनेंट एरर को पकड़ लेगा और फॉलबैक UI प्रदर्शित करेगा।

सस्पेंस और एरर बाउंड्रीज को मिलाना

सस्पेंस और एरर बाउंड्रीज को एसिंक्रोनस ऑपरेशंस के लिए एक मजबूत और व्यापक एरर हैंडलिंग रणनीति प्रदान करने के लिए जोड़ा जा सकता है। उन कंपोनेंट्स को जो सस्पेंड हो सकते हैं, सस्पेंस और एरर बाउंड्रीज दोनों के साथ रैप करके, आप लोडिंग स्टेट्स और अप्रत्याशित एरर्स दोनों को शालीनता से संभाल सकते हैं।

सस्पेंस और एरर बाउंड्रीज को मिलाने का उदाहरण

import React, { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

// डेटा लाने का अनुकरण करें (उदाहरण के लिए, एक एपीआई से)
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // एक सफल डेटा फेच का अनुकरण करें
      // resolve({ name: 'John Doe', age: 30 });

      // डेटा फेचिंग के दौरान एक एरर का अनुकरण करें
      reject(new Error('Failed to fetch user data'));

    }, 2000);
  });
};

// एक रिसोर्स बनाएं जिसका उपयोग सस्पेंस कर सकता है
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise().then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }

      return result;
    },
  };
};

const userData = createResource(fetchData);

// कंपोनेंट जो रिसोर्स से पढ़ता है
const UserProfile = () => {
  const data = userData.read();
  return (
    

      
Name: {data.name}
      
Age: {data.age}
    
  );
};

const App = () => {
  return (
    
      Loading user data...}>
        
      
    
  );
};

export default App;

इस उदाहरण में:

• `ErrorBoundary` कंपोनेंट `Suspense` कंपोनेंट को रैप करता है।
• `Suspense` कंपोनेंट `UserProfile` कंपोनेंट को रैप करता है।
• यदि `fetchData` फ़ंक्शन एक एरर के साथ रिजेक्ट होता है, तो `Suspense` कंपोनेंट प्रॉमिस रिजेक्शन को पकड़ लेगा, और `ErrorBoundary` सस्पेंस द्वारा फेंके गए एरर को पकड़ लेगा।
• `ErrorBoundary` तब फॉलबैक UI प्रदर्शित करेगा।
• यदि डेटा सफलतापूर्वक प्राप्त होता है, तो `Suspense` कंपोनेंट `UserProfile` कंपोनेंट प्रदर्शित करेगा।

उन्नत तकनीकें और सर्वोत्तम अभ्यास

सस्पेंस प्रदर्शन का अनुकूलन

• मेमोइज़ेशन का उपयोग करें: अनावश्यक री-रेंडर को रोकने के लिए सस्पेंस बाउंड्री के भीतर रेंडर किए गए कंपोनेंट्स को मेमोइज़ करें।
• गहरे सस्पेंस ट्री से बचें: रेंडरिंग प्रदर्शन पर प्रभाव को कम करने के लिए सस्पेंस ट्री को उथला रखें।
• डेटा प्रीफ़ेच करें: सस्पेंशन की संभावना को कम करने के लिए डेटा की आवश्यकता होने से पहले उसे प्रीफ़ेच करें।

कस्टम एरर बाउंड्रीज

आप विशिष्ट प्रकार के एरर्स को संभालने के लिए या अधिक जानकारीपूर्ण एरर संदेश प्रदान करने के लिए कस्टम एरर बाउंड्री बना सकते हैं। उदाहरण के लिए, आप एक एरर बाउंड्री बना सकते हैं जो हुए एरर के प्रकार के आधार पर एक अलग फॉलबैक UI प्रदर्शित करती है।

सस्पेंस के साथ सर्वर-साइड रेंडरिंग (SSR)

सस्पेंस का उपयोग सर्वर-साइड रेंडरिंग (SSR) के साथ शुरुआती पेज लोड प्रदर्शन को बेहतर बनाने के लिए किया जा सकता है। SSR का उपयोग करते समय, आप सर्वर पर अपने एप्लिकेशन की प्रारंभिक स्थिति को प्री-रेंडर कर सकते हैं और फिर शेष सामग्री को क्लाइंट को स्ट्रीम कर सकते हैं। सस्पेंस आपको SSR के दौरान एसिंक्रोनस डेटा फेचिंग को संभालने और डेटा स्ट्रीम होने के दौरान लोडिंग इंडिकेटर प्रदर्शित करने की अनुमति देता है।

विभिन्न एरर परिदृश्यों को संभालना

इन विभिन्न एरर परिदृश्यों और उन्हें संभालने के तरीके पर विचार करें:

• नेटवर्क एरर्स: उपयोगकर्ता को एक सूचनात्मक एरर संदेश प्रदर्शित करके नेटवर्क एरर्स को शालीनता से संभालें।
• एपीआई एरर्स: हुए एरर के लिए विशिष्ट एरर संदेश प्रदर्शित करके एपीआई एरर्स को संभालें।
• अप्रत्याशित एरर्स: एरर को लॉग करके और उपयोगकर्ता को एक सामान्य एरर संदेश प्रदर्शित करके अप्रत्याशित एरर्स को संभालें।

ग्लोबल एरर हैंडलिंग

एरर बाउंड्रीज द्वारा नहीं पकड़े गए एरर्स को पकड़ने के लिए एक ग्लोबल एरर हैंडलिंग तंत्र लागू करें। यह एक ग्लोबल एरर हैंडलर का उपयोग करके या पूरे एप्लिकेशन को एक एरर बाउंड्री में रैप करके किया जा सकता है।

वास्तविक-दुनिया के उदाहरण और उपयोग के मामले

ई-कॉमर्स एप्लिकेशन

एक ई-कॉमर्स एप्लिकेशन में, सस्पेंस का उपयोग उत्पाद डेटा प्राप्त करते समय लोडिंग इंडिकेटर प्रदर्शित करने के लिए किया जा सकता है, और एरर बाउंड्रीज का उपयोग चेकआउट प्रक्रिया के दौरान होने वाले एरर्स को संभालने के लिए किया जा सकता है। उदाहरण के लिए, कल्पना कीजिए कि जापान का एक उपयोगकर्ता संयुक्त राज्य अमेरिका में स्थित एक ऑनलाइन स्टोर ब्राउज़ कर रहा है। उत्पाद छवियों और विवरणों को लोड होने में कुछ समय लग सकता है। सस्पेंस एक साधारण लोडिंग एनीमेशन प्रदर्शित कर सकता है जबकि यह डेटा शायद दुनिया भर के सर्वर से प्राप्त किया जा रहा है। यदि भुगतान गेटवे एक अस्थायी नेटवर्क समस्या (विश्व स्तर पर विभिन्न इंटरनेट इन्फ्रास्ट्रक्चर में आम) के कारण विफल हो जाता है, तो एक एरर बाउंड्री एक उपयोगकर्ता-अनुकूल संदेश प्रदर्शित कर सकती है जो उन्हें बाद में पुनः प्रयास करने के लिए प्रेरित करती है।

सोशल मीडिया प्लेटफॉर्म

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

डैशबोर्ड एप्लिकेशन

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

निष्कर्ष

रिएक्ट सस्पेंस और एरर बाउंड्रीज लचीले और उपयोगकर्ता-अनुकूल रिएक्ट एप्लिकेशन बनाने के लिए आवश्यक उपकरण हैं। लोडिंग स्टेट्स को प्रबंधित करने के लिए सस्पेंस का उपयोग करके और अप्रत्याशित एरर्स को संभालने के लिए एरर बाउंड्रीज का उपयोग करके, आप समग्र उपयोगकर्ता अनुभव में सुधार कर सकते हैं और विकास प्रक्रिया को सरल बना सकते हैं। इस गाइड ने सस्पेंस और एरर बाउंड्रीज का एक व्यापक अवलोकन प्रदान किया है, जिसमें बुनियादी अवधारणाओं से लेकर उन्नत तकनीकों तक सब कुछ शामिल है। इस लेख में उल्लिखित सर्वोत्तम प्रथाओं का पालन करके, आप मजबूत और विश्वसनीय रिएक्ट एप्लिकेशन बना सकते हैं जो सबसे चुनौतीपूर्ण परिदृश्यों को भी संभाल सकते हैं।

जैसे-जैसे रिएक्ट का विकास जारी है, सस्पेंस और एरर बाउंड्रीज आधुनिक वेब एप्लिकेशन बनाने में एक महत्वपूर्ण भूमिका निभाने की संभावना है। इन सुविधाओं में महारत हासिल करके, आप वक्र से आगे रह सकते हैं और असाधारण उपयोगकर्ता अनुभव प्रदान कर सकते हैं।