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

रिएक्ट क्वेरी लोडिंग राज्यों और वैश्विक राज्यों के प्रबंधन को बहुत सरल बनाती है। दरअसल, रिएक्ट क्वेरी अनावश्यक अनुरोधों से बचती है, जिससे एप्लिकेशन का प्रदर्शन अनुकूलित होता है।

आइए एक कोड उदाहरण लें जो हमारे एप्लिकेशन में एक लोडिंग स्थिति लागू करता है।

उपयोगकर्ताओं की सूची लाने के लिए एक हुक परिभाषित करें:

export const useUsers = () => {
  const { data, isLoading } = useQuery({
    queryKey: ["users"],
    queryFn: async () => {
      const response = await fetch("https://jsonplaceholder.typicode.com/users");
      await new Promise((resolve) => setTimeout(resolve, 2000));
      return response.json();
    },
  });

  return {
    users: data?.slice(0, 4) || [],
    isLoading,
  };
};

यहां, हम यूज़क्वेरी वाले चार उपयोगकर्ताओं को लाते हैं। हम लोडिंग स्थिति को दर्शाने के लिए 2 सेकंड की देरी जोड़ते हैं। फिर हम लोडिंग स्थिति के लिए डेटा और एक बूलियन लौटाते हैं।

घटक पक्ष पर, आइए उदाहरण नामक एक घटक बनाएं:

const Example = (): JSX.Element => {
  const { users, isLoading } = useUsers();

  if (isLoading) {
    return 
Loading...
;
  }

  return (
    

      

        
Users
        

          Add users
        
      
      
  );
};

इस घटक में, हम उपयोगकर्ताओं की सूची लाने के लिए अपने हुक का उपयोग करते हैं। दृश्य प्रस्तुत करने से पहले, हम एक लोडिंग संदेश के साथ "प्रारंभिक वापसी" करते हैं, फिर शीर्षक, बटन और उपयोगकर्ता प्रदर्शित करते हैं।

सीमाएँ और विकल्प

हालाँकि, प्रत्येक नेटवर्क कॉल के लिए लोडिंग स्थिति के स्पष्ट प्रबंधन की आवश्यकता होती है। यदि कोड को फैक्टराइज़ नहीं किया गया है, तो दृश्य के कुछ तत्व प्रदर्शित होने की प्रतीक्षा कर रहे होंगे, जैसे शीर्षक और क्रिया।

दृश्य को अवरुद्ध करने से बचने का एक विकल्प यहां दिया गया है:

import "./App.css";
import UsersList from "./UsersList";
import { useUsers } from "./useUsers";

const Example = (): JSX.Element => {
  const { users, isLoading } = useUsers();

  return (
    

      

        
Users
        

          Add users
        
      
      {isLoading ? 
Loading...
 : }
    
  );
};

यहाँ, हम "जल्दी रिटर्न" के बजाय सशर्त प्रतिपादन का उपयोग करते हैं। यह समाधान कम पठनीय है और जटिल घटकों में इसे बनाए रखना कठिन है।

आदर्श समाधान: एक सामान्य लोडिंग घटक

सबसे सरल समाधान एक घटक बनाना है जो एक चर के आधार पर हमारे लोडिंग संदेश या हमारे मुख्य घटक को प्रस्तुत करता है।

type Props = PropsWithChildren;

const LoadingWrapper = ({ children, isLoading }: Props): JSX.Element => {
  if (isLoading) {
    return 
Loading...
;
  }

  return {children}>;
};

हमारे घटक में उपयोग

const Example = (): JSX.Element => {
  const { users, isLoading } = useUsers();

  return (
    

      ...
      
  );
};

यह कारककरण सशर्त प्रतिपादन तर्क को केंद्रीकृत करता है और संदेशों को लोड करने के उपयोग को एकीकृत करता है, क्लीनर और अधिक रखरखाव योग्य कोड की पेशकश करता है।

सस्पेंस का जादू खोजें

लेकिन अब, अगर मैं आपको बताऊं कि यह घटक जो हमने अभी बनाया है वह पहले से ही रिएक्ट में निर्मित है। इससे भी बेहतर, यह जादुई है! isLoading स्थिति का अब कोई मैन्युअल प्रबंधन नहीं!

कैसे?

रिएक्ट के सस्पेंस (रिएक्ट संस्करण> = 16.6) के साथ, सब कुछ सरल और साफ हो जाता है। सस्पेंस आपको रिएक्ट को स्पष्ट रूप से घोषित करने की अनुमति देता है कि एक घटक अतुल्यकालिक डेटा की प्रतीक्षा कर रहा है, और रिएक्ट हमारे लिए सब कुछ प्रबंधित करने का ख्याल रखता है।

SuspenseQuery का उपयोग लागू करना

आइए लोडिंग स्थिति को स्वचालित रूप से प्रबंधित करने के लिए useSuspenseQuery का उपयोग करें। इसे करने का तरीका यहां बताया गया है:

उपयोगकर्ताओं को लाने का हुक

export const useUsersSuspense = () => {
  const { data } = useSuspenseQuery(
    ...
  );

  return {
    users: data?.slice(0, 4) || [],
    // Without the isLoading
  };
};

सस्पेंस के साथ घटक में उपयोग

अब, आइए सस्पेंस का उपयोग करने के लिए हमारे उदाहरण घटक को अपडेट करें:

const UsersComponent = (): JSX.Element => {
  const { users } = useUsersSuspense();

  return ;
};

const Example = (): JSX.Element => {
  return (
    

      

        
Users
        

          Add users
        
      
      Loading...
}>
        
  );
};

सस्पेंस के फायदे

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

इसके अलावा, सस्पेंस विकास टीमों को अपने कोड को फैक्टराइज़ करने के लिए प्रोत्साहित करता है। मानकीकृत लोडिंग घटकों और अतुल्यकालिक राज्य हैंडलर का उपयोग करके, डेवलपर्स पुन: प्रयोज्य और सुसंगत मॉड्यूल बना सकते हैं, इस प्रकार लंबी अवधि में कोड की गुणवत्ता और रखरखाव में सुधार होता है।

निष्कर्ष

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

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

मेरा न्यूज़लैटर :D