React Suspense: डेटा फ़ेचिंग और कोड स्प्लिटिंग के लिए एक व्यापक गाइड

React Suspense React 16.6 में पेश की गई एक शक्तिशाली सुविधा है जो आपको किसी चीज़ की प्रतीक्षा करते समय, जैसे डेटा लोड होने या कोड डाउनलोड होने के दौरान, कंपोनेंट रेंडरिंग को "सस्पेंड" करने की अनुमति देती है। यह लोडिंग स्टेट्स को प्रबंधित करने और अतुल्यकालिक ऑपरेशनों को शालीनता से संभालकर उपयोगकर्ता अनुभव को बेहतर बनाने का एक घोषणात्मक तरीका प्रदान करता है। यह गाइड आपको Suspense की अवधारणाओं, इसके उपयोग के मामलों और आपके React अनुप्रयोगों में इसे लागू करने के व्यावहारिक उदाहरणों के माध्यम से मार्गदर्शन करेगा।

React Suspense क्या है?

Suspense एक React कंपोनेंट है जो अन्य कंपोनेंट्स को लपेटता है और आपको किसी प्रॉमिज़ के हल होने की प्रतीक्षा करते समय एक फ़ॉलबैक UI (जैसे, एक लोडिंग स्पिनर) प्रदर्शित करने की अनुमति देता है। यह प्रॉमिज़ इससे संबंधित हो सकता है:

• डेटा फ़ेचिंग: API से डेटा प्राप्त करने की प्रतीक्षा करना।
• कोड स्प्लिटिंग: जावास्क्रिप्ट मॉड्यूल को डाउनलोड और पार्स करने की प्रतीक्षा करना।

Suspense से पहले, लोडिंग स्टेट्स को प्रबंधित करने में अक्सर जटिल सशर्त रेंडरिंग और अतुल्यकालिक ऑपरेशनों का मैन्युअल प्रबंधन शामिल होता था। Suspense एक घोषणात्मक दृष्टिकोण प्रदान करके इसे सरल बनाता है, जिससे आपका कोड साफ और अधिक रखरखाव योग्य बनता है।

मुख्य अवधारणाएँ

• Suspense कंपोनेंट: <Suspense> कंपोनेंट स्वयं। यह एक fallback प्रॉप स्वीकार करता है, जो लपेटा हुआ कंपोनेंट सस्पेंड होने पर प्रदर्शित होने वाला UI निर्दिष्ट करता है।
• React.lazy(): एक फ़ंक्शन जो गतिशील रूप से कंपोनेंट्स को आयात करके कोड स्प्लिटिंग को सक्षम बनाता है। यह कंपोनेंट लोड होने पर हल होने वाला एक Promise लौटाता है।
• Promise इंटीग्रेशन: Suspense प्रॉमिज़ के साथ सहजता से एकीकृत होता है। जब कोई कंपोनेंट अभी तक हल न हुए प्रॉमिज़ से डेटा रेंडर करने का प्रयास करता है, तो यह "सस्पेंड" हो जाता है और फ़ॉलबैक UI प्रदर्शित करता है।

उपयोग के मामले

1. Suspense के साथ डेटा फ़ेचिंग

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

उदाहरण: API से उपयोगकर्ता डेटा फ़ेच करना

मान लीजिए आपके पास एक कंपोनेंट है जो API से फ़ेच किए गए उपयोगकर्ता डेटा को प्रदर्शित करता है। Suspense के बिना, आपके पास कुछ ऐसा कोड हो सकता है:

import React, { useState, useEffect } from 'react';

function UserProfile() {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/users/123');
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err);
      } finally {
        setIsLoading(false);
      }
    }

    fetchData();
  }, []);

  if (isLoading) {
    return <p>उपयोगकर्ता डेटा लोड हो रहा है...</p>;
  }

  if (error) {
    return <p>त्रुटि: {error.message}</p>;
  }

  if (!user) {
    return <p>कोई उपयोगकर्ता डेटा उपलब्ध नहीं है।</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>ईमेल: {user.email}</p>
    </div>
  );
}

export default UserProfile;

यह कोड काम करता है, लेकिन इसमें कई स्टेट वेरिएबल्स (isLoading, error, user) और सशर्त रेंडरिंग लॉजिक का प्रबंधन शामिल है। Suspense के साथ, आप SWR या TanStack Query (पूर्व में React Query) जैसी डेटा फ़ेचिंग लाइब्रेरी का उपयोग करके इसे सरल बना सकते हैं, जो Suspense के साथ सहज रूप से काम करने के लिए डिज़ाइन की गई हैं।

यहां बताया गया है कि आप SWR को Suspense के साथ कैसे उपयोग कर सकते हैं:

import React from 'react';
import useSWR from 'swr';

// एक साधारण फ़ेचर फ़ंक्शन
const fetcher = (...args) => fetch(...args).then(res => res.json());

function UserProfile() {
  const { data: user, error } = useSWR('/api/users/123', fetcher, { suspense: true });

  if (error) {
    return <p>त्रुटि: {error.message}</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>ईमेल: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<p>उपयोगकर्ता डेटा लोड हो रहा है...</p>}
      >
      <UserProfile />
    </Suspense>
  );
}

export default App;

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

• हम उपयोगकर्ता डेटा को फ़ेच करने के लिए useSWR का उपयोग करते हैं। suspense: true विकल्प SWR को बताता है कि यदि डेटा अभी तक उपलब्ध नहीं है तो एक प्रॉमिज़ थ्रो करे।
• UserProfile कंपोनेंट को लोडिंग या एरर स्टेट्स को स्पष्ट रूप से प्रबंधित करने की आवश्यकता नहीं है। यह डेटा उपलब्ध होने पर बस उपयोगकर्ता डेटा को रेंडर करता है।
• <Suspense> कंपोनेंट SWR द्वारा थ्रो किए गए प्रॉमिज़ को पकड़ता है और डेटा फ़ेच करते समय फ़ॉलबैक UI (<p>उपयोगकर्ता डेटा लोड हो रहा है...</p>) प्रदर्शित करता है।

यह दृष्टिकोण आपके कंपोनेंट लॉजिक को सरल बनाता है और डेटा फ़ेचिंग के बारे में तर्क करना आसान बनाता है।

डेटा फ़ेचिंग के लिए वैश्विक विचार:

वैश्विक दर्शकों के लिए एप्लिकेशन बनाते समय, निम्नलिखित पर विचार करें:

• नेटवर्क लेटेंसी: विभिन्न भौगोलिक स्थानों के उपयोगकर्ताओं को अलग-अलग नेटवर्क लेटेंसी का अनुभव हो सकता है। Suspense दूरस्थ सर्वर से डेटा फ़ेच करते समय लोडिंग संकेतक प्रदर्शित करके बेहतर उपयोगकर्ता अनुभव प्रदान करने में मदद कर सकता है। अपने उपयोगकर्ताओं के करीब अपना डेटा कैश करने के लिए कंटेंट डिलीवरी नेटवर्क (CDN) का उपयोग करने पर विचार करें।
• डेटा स्थानीयकरण: सुनिश्चित करें कि आपका API डेटा स्थानीयकरण का समर्थन करता है, जिससे आप उपयोगकर्ता की पसंदीदा भाषा और प्रारूप में डेटा सेवा प्रदान कर सकें।
• API उपलब्धता: एक सुसंगत उपयोगकर्ता अनुभव सुनिश्चित करने के लिए विभिन्न क्षेत्रों से अपने API की उपलब्धता और प्रदर्शन की निगरानी करें।

2. React.lazy() और Suspense के साथ कोड स्प्लिटिंग

कोड स्प्लिटिंग आपके एप्लिकेशन को छोटे-छोटे हिस्सों में तोड़ने की एक तकनीक है, जिन्हें मांग पर लोड किया जा सकता है। यह विशेष रूप से बड़े और जटिल प्रोजेक्ट्स के लिए आपके एप्लिकेशन के प्रारंभिक लोड समय में काफी सुधार कर सकता है।

React कंपोनेंट्स के कोड स्प्लिटिंग के लिए React.lazy() फ़ंक्शन प्रदान करता है। जब Suspense के साथ उपयोग किया जाता है, तो यह कंपोनेंट को डाउनलोड और पार्स करने की प्रतीक्षा करते समय एक फ़ॉलबैक UI प्रदर्शित करने की अनुमति देता है।

उदाहरण: एक कंपोनेंट को लेज़ी लोड करना

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

const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<p>लोड हो रहा है...</p>}
        >
        <OtherComponent />
      </Suspense>
    </div>
  );
}

export default MyComponent;

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

• हम OtherComponent को गतिशील रूप से आयात करने के लिए React.lazy() का उपयोग करते हैं। यह कंपोनेंट लोड होने पर हल होने वाला एक प्रॉमिज़ लौटाता है।
• हम <OtherComponent /> को <Suspense> के साथ लपेटते हैं और एक fallback प्रॉप प्रदान करते हैं।
• जबकि OtherComponent लोड हो रहा है, फ़ॉलबैक UI (<p>लोड हो रहा है...</p>) प्रदर्शित किया जाएगा। कंपोनेंट लोड होने के बाद, यह फ़ॉलबैक UI को बदल देगा।

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

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

उन्नत कोड स्प्लिटिंग तकनीकें:

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

3. Concurrent Mode और Suspense

Suspense React के Concurrent Mode के लिए एक प्रमुख घटक है, जो नई सुविधाओं का एक सेट है जो React को कई कार्यों को समवर्ती रूप से करने में सक्षम बनाता है। Concurrent Mode React को महत्वपूर्ण अपडेट को प्राथमिकता देने, लंबे समय तक चलने वाले कार्यों को बाधित करने और आपके एप्लिकेशन की प्रतिक्रिया को बेहतर बनाने की अनुमति देता है।

Concurrent Mode और Suspense के साथ, React कर सकता है:

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

Concurrent Mode को सक्षम करने के लिए, आप React 18 में createRoot API का उपयोग कर सकते हैं:

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container); // एक रूट बनाएं।
root.render(<App />);

Suspense का उपयोग करने के लिए सर्वोत्तम अभ्यास

• डेटा फ़ेचिंग लाइब्रेरी का उपयोग करें: SWR या TanStack Query जैसी डेटा फ़ेचिंग लाइब्रेरी का उपयोग करने पर विचार करें, जो Suspense के साथ सहज रूप से काम करने के लिए डिज़ाइन की गई हैं। ये लाइब्रेरी कैशिंग, स्वचालित पुनः प्रयास और त्रुटि प्रबंधन जैसी सुविधाएँ प्रदान करती हैं, जो आपके डेटा फ़ेचिंग लॉजिक को सरल बना सकती हैं।
• सार्थक फ़ॉलबैक UI प्रदान करें: फ़ॉलबैक UI को यह स्पष्ट संकेत देना चाहिए कि कुछ लोड हो रहा है। एक दृश्य रूप से आकर्षक और सूचनात्मक लोडिंग अनुभव बनाने के लिए स्पिनर, प्रगति बार या अस्थि कंकाल लोडर का उपयोग करें।
• त्रुटियों को शालीनता से संभालें: रेंडरिंग के दौरान होने वाली त्रुटियों को पकड़ने के लिए एरर बाउंड्री का उपयोग करें। यह आपके पूरे एप्लिकेशन को क्रैश होने से रोक सकता है और एक बेहतर उपयोगकर्ता अनुभव प्रदान कर सकता है।
• कोड स्प्लिटिंग को अनुकूलित करें: अपने एप्लिकेशन के प्रारंभिक लोड समय को कम करने के लिए रणनीतिक रूप से कोड स्प्लिटिंग का उपयोग करें। बड़े या शायद ही कभी उपयोग किए जाने वाले कंपोनेंट्स की पहचान करें और उन्हें अलग-अलग हिस्सों में विभाजित करें।
• अपने Suspense कार्यान्वयन का परीक्षण करें: यह सुनिश्चित करने के लिए अपने Suspense कार्यान्वयन का पूरी तरह से परीक्षण करें कि यह सही ढंग से काम कर रहा है और आपका एप्लिकेशन लोडिंग स्टेट्स और त्रुटियों को शालीनता से संभाल रहा है।

एरर बाउंड्री के साथ एरर हैंडलिंग

जबकि Suspense *लोडिंग* स्टेट को संभालता है, एरर बाउंड्री रेंडरिंग के दौरान *त्रुटि* स्टेट को संभालती हैं। एरर बाउंड्री React कंपोनेंट्स हैं जो उनके चाइल्ड कंपोनेंट ट्री में कहीं भी जावास्क्रिप्ट त्रुटियों को पकड़ते हैं, उन त्रुटियों को लॉग करते हैं, और पूरे कंपोनेंट ट्री को क्रैश करने के बजाय फ़ॉलबैक 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 <h1>कुछ गलत हो गया।</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

एरर बाउंड्री का उपयोग करने के लिए, इसे उस कंपोनेंट के चारों ओर लपेटें जो त्रुटि फेंक सकता है:

import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}

export default App;

Suspense और एरर बाउंड्री को मिलाकर, आप एक मजबूत और लचीला एप्लिकेशन बना सकते हैं जो लोडिंग स्टेट्स और त्रुटियों दोनों को शालीनता से संभालता है।

वास्तविक दुनिया के उदाहरण

यहां कुछ वास्तविक दुनिया के उदाहरण दिए गए हैं कि कैसे Suspense का उपयोग उपयोगकर्ता अनुभव को बेहतर बनाने के लिए किया जा सकता है:

• ई-कॉमर्स वेबसाइट: उत्पाद विवरण या छवियों को फ़ेच करते समय लोडिंग संकेतक प्रदर्शित करने के लिए Suspense का उपयोग करें। यह डेटा लोड होने की प्रतीक्षा करते समय उपयोगकर्ता को खाली पृष्ठ देखने से रोक सकता है।
• सोशल मीडिया प्लेटफॉर्म: जब उपयोगकर्ता पृष्ठ को नीचे स्क्रॉल करता है तो टिप्पणियों या पोस्ट को लेज़ी लोड करने के लिए Suspense का उपयोग करें। यह पृष्ठ के प्रारंभिक लोड समय में सुधार कर सकता है और डाउनलोड किए जाने वाले डेटा की मात्रा को कम कर सकता है।
• डैशबोर्ड एप्लिकेशन: चार्ट या ग्राफ़ के लिए डेटा फ़ेच करते समय लोडिंग संकेतक प्रदर्शित करने के लिए Suspense का उपयोग करें। यह एक सहज और अधिक प्रतिक्रियाशील उपयोगकर्ता अनुभव प्रदान कर सकता है।

उदाहरण: अंतर्राष्ट्रीय ई-कॉमर्स प्लेटफ़ॉर्म

वैश्विक स्तर पर उत्पादों को बेचने वाले एक अंतर्राष्ट्रीय ई-कॉमर्स प्लेटफ़ॉर्म पर विचार करें। प्लेटफ़ॉर्म इसका लाभ उठा सकता है:

• उत्पाद छवियों को लेज़ी लोड करें: उत्पाद छवियों को केवल तभी लोड करने के लिए React.lazy() का उपयोग करें जब वे व्यूपोर्ट में दिखाई दे रहे हों। यह उत्पाद लिस्टिंग पृष्ठ के प्रारंभिक लोड समय को काफी कम कर सकता है। वास्तविक छवि लोड होने पर प्लेसहोल्डर छवि प्रदर्शित करने के लिए प्रत्येक लेज़ी-लोडेड छवि को <Suspense fallback={<img src="placeholder.png" alt="लोड हो रहा है..." />}> के साथ लपेटें।
• देश-विशिष्ट कंपोनेंट्स को कोड स्प्लिट करें: यदि प्लेटफ़ॉर्म में देश-विशिष्ट कंपोनेंट्स (जैसे, मुद्रा स्वरूपण, पता इनपुट फ़ील्ड) हैं, तो उपयोगकर्ता द्वारा एक विशिष्ट देश का चयन करने पर ही इन कंपोनेंट्स को लोड करने के लिए React.lazy() का उपयोग करें।
• स्थानीयकृत उत्पाद विवरण फ़ेच करें: उपयोगकर्ता की पसंदीदा भाषा में उत्पाद विवरण फ़ेच करने के लिए Suspense के साथ SWR जैसी डेटा फ़ेचिंग लाइब्रेरी का उपयोग करें। स्थानीयकृत विवरण फ़ेच किए जाने पर लोडिंग संकेतक प्रदर्शित करें।

निष्कर्ष

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

डेटा फ़ेचिंग लाइब्रेरी और कोड स्प्लिटिंग तकनीकों के साथ Suspense को एकीकृत करके, आप React के Concurrent Mode की पूरी क्षमता का उपयोग कर सकते हैं और वास्तव में आधुनिक और आकर्षक वेब एप्लिकेशन बना सकते हैं। Suspense को अपनाएं और अपने React विकास को अगले स्तर पर ले जाएं।

आगे सीखना

• React Suspense Documentation
• SWR Documentation
• TanStack Query Documentation
• React 18 Announcement (Concurrent Mode)