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

प्रदर्शन अनुकूलन हुक useTransition हमें GUI को ब्लॉक किए बिना स्टेट्स को अपडेट करने की अनुमति देता है।

इस हुक की मदद से हम किसी स्टेट के अपडेट को कम प्राथमिकता निर्दिष्ट कर सकते हैं, जो अन्य स्टेट्स के अपडेट को उच्च प्राथमिकता रखने और बिना किसी देरी के निष्पादित होने की अनुमति देगा।

एक उदाहरण के रूप में, उपयोगकर्ता द्वारा सर्च फ़ील्ड में कैरेक्टर्स दर्ज करने पर उत्पादों की ड्रॉपडाउन सूची को फ़िल्टर करना लिया जा सकता है। निश्चित रूप से, सूची स्वयं कुछ देरी के साथ दिखाई दे सकती है, लेकिन हम नहीं चाहेंगे कि सर्च फ़ील्ड में कैरेक्टर्स देरी के साथ दर्ज हों।

आइए देखें कि ऐसे मामलों में हुक useTransition हमारी कैसे मदद कर सकता है। मान लीजिए, हमारे पास मुख्य कंपोनेंट का कोड का एक हिस्सा है। आइए इसका विश्लेषण करें:

import { useTransition } from 'react';
import { useState } from 'react';

function App() {
	const [isPending, startTransition] = useTransition();
	const [filterTerm, setFilterTerm] = useState('');
  
	const filteredProducts = filterProducts(filterTerm);
  
	function updateFilterHandler(event) {
		startTransition(() => {
			setFilterTerm(event.target.value);
		});
	}
 
	return (
		<div>
			<input type="text" onChange={updateFilterHandler} />
			<ProductList products={filteredProducts} />
		</div>
	);
}

यहां हम useTransition के लिए दो वेरिएबल्स देख रहे हैं। वेरिएबल isPending एक बूलियन वैल्यू रखता है और दिखाता है कि अपडेट की प्रक्रिया समाप्त हो गई है या नहीं, और startTransition फ़ंक्शन, जो अपडेट की प्राथमिकता को कम करने की अनुमति देता है:

const [isPending, startTransition] = useTransition();

हमारे पास एक स्टेट filterTerm भी है, जिसमें इनपुट फ़ील्ड में दर्ज किया गया एक्सप्रेशन स्टोर होता है और इसे सेट करने के लिए setFilterTerm फ़ंक्शन है:

const [filterTerm, setFilterTerm] = useState('');

इनपुट में कैरेक्टर्स दर्ज करने पर हर बार updateFilterHandler फ़ंक्शन कॉल होता है, जिसमें filterTerm का अपडेट होता है। यहीं पर हम अपने हुक useTransition को लागू करते हैं, सेटर फ़ंक्शन setFilterTerm को startTransition में निम्नलिखित तरीके से रैप करके:

function updateFilterHandler(event) {
	startTransition(() => {
		setFilterTerm(event.target.value);
	});
}

इस प्रकार, हमने स्टेट filterTerm के अपडेट के लिए कम प्राथमिकता निर्धारित की है और हमारी इनपुट फ़ील्ड उत्तरदायी बनी रहेगी।

वेरिएबल isPending की मदद से हम उपयोगकर्ता को यह दिखा सकते हैं कि सूची का अपडेट अभी भी प्रगति पर है। इनपुट फ़ील्ड के नीचे यह जानकारी दिखाएं, जब तक सूची अपडेट हो रही है:

return (
	<div>
		<input type="text" onChange={updateFilterHandler} />
		{isPending && <p>updating ...</p>}
		<ProductList products={filteredProducts} />
	</div>
);