M
MLOG
रिएक्ट का use: रिसोर्स हुक: एक विस्तृत गाइड | MLOG | MLOG}> {/* Assuming this ID doesn't exist and will cause an error */} ); } export default App;

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

use: के साथ उन्नत तकनीकें

1. रिसोर्सेज को कैश करना

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

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

const resourceCache = new Map();

async function fetchUser(id) {
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  if (!response.ok) {
    throw new Error(`Failed to fetch user: ${response.status}`);
  }
  return response.json();
}

function getUserResource(userId) {
  if (!resourceCache.has(userId)) {
    resourceCache.set(userId, {
      read() {
        if (!this.promise) {
          this.promise = fetchUser(userId);
        }
        if (this.result) {
          return this.result;
        }
        throw this.promise;
      }
    });
  }
  return resourceCache.get(userId);
}

function UserProfile({ userId }) {
  const resource = getUserResource(userId);
  const user = resource.read();

  return (
    

      
{user.name}

      
Email: {user.email}

      
Phone: {user.phone}

    

  );
}

function App() {
  return (
    Loading user data...
}> ); } export default App;

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

2. सर्वर कंपोनेंट्स के साथ use: का उपयोग करना

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

Next.js सर्वर कंपोनेंट के साथ उदाहरण

            
// app/user/[id]/page.jsx (Server Component in Next.js)
import React from 'react';

async function fetchUser(id) {
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  if (!response.ok) {
    throw new Error(`Failed to fetch user: ${response.status}`);
  }
  return response.json();
}

export default async function UserPage({ params }) {
  const user = React.use(fetchUser(params.id));

  return (
    

      
{user.name}

      
Email: {user.email}

      
Phone: {user.phone}

    

  );
}

इस Next.js सर्वर कंपोनेंट में, fetchUser फ़ंक्शन सर्वर पर उपयोगकर्ता डेटा फ़ेच करता है। use: हुक कंपोनेंट को तब तक सस्पेंड करता है जब तक डेटा उपलब्ध न हो, जिससे कुशल सर्वर-साइड रेंडरिंग संभव हो पाती है।

use: के लिए सर्वोत्तम प्रथाएं

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

1. ई-कॉमर्स उत्पाद सूची

एक ई-कॉमर्स वेबसाइट की कल्पना करें जो उत्पाद सूचियों को प्रदर्शित करती है। प्रत्येक उत्पाद कार्ड उत्पाद विवरण फ़ेच करने के लिए use: का उपयोग कर सकता है:

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

async function fetchProduct(productId) {
  const response = await fetch(`/api/products/${productId}`);
  if (!response.ok) {
    throw new Error(`Failed to fetch product: ${response.status}`);
  }
  return response.json();
}

function ProductCard({ productId }) {
  const product = React.use(fetchProduct(productId));

  return (
    

      
{product.name}

      
{product.description}

      
Price: ${product.price}

    

  );
}

function ProductList({ productIds }) {
  return (
    

      {productIds.map((productId) => (
        Loading product...
}>
          
        
      ))}
); } export default ProductList;

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

2. सोशल मीडिया फ़ीड

एक सोशल मीडिया फ़ीड उपयोगकर्ता प्रोफाइल, पोस्ट और टिप्पणियों को फ़ेच करने के लिए use: का उपयोग कर सकता है:

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

async function fetchPost(postId) {
  const response = await fetch(`/api/posts/${postId}`);
  if (!response.ok) {
    throw new Error(`Failed to fetch post: ${response.status}`);
  }
  return response.json();
}

async function fetchComments(postId) {
  const response = await fetch(`/api/posts/${postId}/comments`);
  if (!response.ok) {
    throw new Error(`Failed to fetch comments: ${response.status}`);
  }
  return response.json();
}

function Comments({ postId }) {
  const comments = React.use(fetchComments(postId));

  return (
    
    
      {comments.map((comment) => (
        
  • {comment.text}
    • 
      ))}
    

  );
}

function Post({ postId }) {
  const post = React.use(fetchPost(postId));

  return (
    

      
{post.title}

      
{post.content}

      Loading comments...
}>
); } export default Post;

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

सामान्य गलतियाँ और उनसे कैसे बचें

use: के विकल्प

हालांकि use: महत्वपूर्ण लाभ प्रदान करता है, रिएक्ट में डेटा फ़ेचिंग के लिए वैकल्पिक दृष्टिकोण भी हैं:

इन विकल्पों के बीच का चुनाव आपकी एप्लिकेशन की जटिलता और आपकी विशिष्ट आवश्यकताओं पर निर्भर करता है। सरल डेटा फ़ेचिंग परिदृश्यों के लिए, use: एक बढ़िया विकल्प हो सकता है। अधिक जटिल परिदृश्यों के लिए, useSWR या रिएक्ट क्वेरी जैसी लाइब्रेरी अधिक उपयुक्त हो सकती हैं।

निष्कर्ष

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

संसाधन