रिएक्ट यूजर इंटरफेस बनाने के लिए एक लोकप्रिय जावास्क्रिप्ट लाइब्रेरी है। यह दक्षता और पुन: प्रयोज्य यूआई घटकों को बनाने पर ध्यान केंद्रित करने के लिए जाना जाता है। रिएक्ट में प्रमुख विशेषताओं में से एक हुक की शुरूआत है जो एक ऐसा फ़ंक्शन है जो रिएक्ट स्थिति में हुक करता है। उन हुकों में से यूज़ट्रांज़िशन हुक है। यह हुक इंटरफ़ेस को अवरुद्ध किए बिना स्थिति परिवर्तन की अनुमति देता है जिसके परिणामस्वरूप सहज अनुभव होता है।

यूज़ट्रांज़िशन हुक को समझना

यूज़ट्रांज़िशन हुक को बेहतर ढंग से समझने के लिए हम निम्नलिखित उदाहरण देखेंगे।

import {useState} from "react"

const App = () => {
  const [post, setPost] = useState(undefined)

  const fetchData = async () => {
    await fetch("https://jsonplaceholder.org/posts/1")
      .then((result) => result.json())
      .then((result) => setPost(result))
  }

  return(
    

      {post !== undefined && (
      

        
{post?.title}
        
{post?.content}
      
      )}
      
        Get post
      
    
  )
}

export default App; 

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

यूज़ट्रांज़िशन हुक का उपयोग करके उन समस्याओं को आसानी से ठीक किया जा सकता है, हम पिछले कोड को कुछ इस तरह अपडेट कर सकते हैं।

import {useState, useTransition} from "react"
import {ImSpinner2} from "react-icons/im"

const App = () => {
  const [pending, startTransition] = useTransition()
  const [post, setPost] = useState({})

  const fetchData = () => {
    startTransition( async () => {
      await fetch("https://jsonplaceholder.org/posts/1")
        .then((result) => result.json())
        .then((result) => setPost(result))
    })
  }

  return(
    

      {post !== undefined && (
      

        
{post.title}
        
{post.content}
      
      )}
      
        {pending ?  : "Get post" }
      
    
  )
}

export default App; 

आह्वान किया गया यूज़ट्रांज़िशन हुक दो मान लौटाता है: यदि कार्य निष्पादित किया जाता है तो लंबित कौन सा मान सत्य होगा और स्टार्टट्रांज़िशन फ़ंक्शन में वह कार्य शामिल है जो अधिक जरूरी कार्यों से बाधित होता है।

उपरोक्त उदाहरण में हमने फ़ेच अनुरोध को एक एसिंक्रोनस एरो फ़ंक्शन के साथ लपेटा है जो स्टार्टट्रांज़िशन फ़ंक्शन के अंदर है।

और बटन में हम इसे इस तरह से संशोधित करते हैं जिसमें एक अक्षम विशेषताएँ शामिल होती हैं जो लंबित से जुड़ी होती हैं और हमने बटन के लेबल को बदल दिया है ताकि कार्य लंबित होने पर एक स्पिनर दिखाया जा सके और जब कार्य लंबित हो तो "पोस्ट प्राप्त करें" लेबल दिखाया जा सके। कार्य लंबित नहीं है.

इसके परिणामस्वरूप सहज उपयोगकर्ता अनुभव प्राप्त होता है और बेहतर प्रदर्शन मिलता है तथा आपके एप्लिकेशन को उपयोगकर्ता के दुर्व्यवहार से सुरक्षा मिलती है।

निष्कर्ष

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