रिएक्ट में प्रदर्शन अनुकूलन हुक useDeferredValue

प्रदर्शन अनुकूलन हुक useDeferredValue, ठीक useTransition की तरह, यूजर इंटरफेस के काम को तेज करने में मदद करता है, लेकिन यह थोड़ा अलग तरीके से करता है।

पिछले पाठ पर एक नज़र डालें और देखें कि useTransition के मामले में हमने setFilterTerm अपडेट फ़ंक्शन को कैसे रैप किया था। खैर, स्टेट अपडेट कोड हमेशा उपलब्ध नहीं हो सकता है। यह छिपा हुआ हो सकता है, उदाहरण के लिए, किसी लाइब्रेरी में जिसे आपने इनक्लूड किया है। इस मामले में, हम useDeferredValue हुक का उपयोग कर सकते हैं। तब हमें या तो खुद स्टेट को, या उस स्टेट की मदद से गणना किए गए रिजल्ट को रैप करना होगा, जिससे इसकी प्राथमिकता कम हो जाएगी।

आइए चाइल्ड कम्पोनेंट ProductList के निम्नलिखित कोड स्निपेट का विश्लेषण करते हैं:

ProductList.jsximport {useDeferredValue} from 'react'

function ProductList({ products }) {
  const deferredProducts = useDeferredValue(products);
  
  return (
    <ul>
      {deferredProducts.map((product) => (
        <li>{product}</li>
      ))}
    </ul>
  );
}

ध्यान दें, कि यहाँ हमने useDeferredValue में products वेरिएबल को ही रैप किया है, जिसे हमने कम्पोनेंट के प्रॉप्स से लिया है। फिर हमने रिजल्ट को deferredProducts में असाइन कर दिया, जिसके साथ हम आगे काम करेंगे:

ProductList.jsxconst deferredProducts = useDeferredValue(products);

अब, यदि मुख्य कम्पोनेंट के उस कोड स्निपेट में, जिसे हमने पिछले पाठ में देखा था, इस लाइन को हटा दें:

App.jsxconst [isPending, startTransition] = useTransition();

और isPending के उपयोग वाली लाइन को:

App.jsx{isPending && <p>updating ...</p>}

और साथ ही setFilterTerm फ़ंक्शन से रैपर हटा दें, तो हमें पिछले पाठ जैसा ही रिजल्ट मिलेगा:

App.jsxfunction updateFilterHandler(event) {
  setFilterTerm(event.target.value);
}