রিয়েক্টে পারফরম্যান্স অপ্টিমাইজেশন হুক useDeferredValue

পারফরম্যান্স অপ্টিমাইজেশন হুক useDeferredValue, ঠিক useTransition এর মতোই, গ্রাফিক্যাল ইন্টারফেসের কাজের গতি বাড়াতে সাহায্য করে, কিন্তু এটি কিছুটা ভিন্নভাবে করে।

পূর্ববর্তী পাঠটি একনজর দেখুন এবং দেখুন কিভাবে useTransition এর ক্ষেত্রে আমরা আপডেট ফাংশন setFilterTerm কে র‍্যাপ করেছিলাম। আসলে, স্টেট আপডেট করার কোড সর্বদা উপলব্ধ নাও থাকতে পারে। এটি লুকিয়ে থাকতে পারে, উদাহরণস্বরূপ, আপনি যে লাইব্রেরি সংযুক্ত করেছেন তার মধ্যে। এই ক্ষেত্রে আমরা useDeferredValue হুক ব্যবহার করতে পারি। তখন আমাদের হয় স্টেট自身কে, বা সেই স্টেট ব্যবহার করে গণনা করা ফলাফলকে র‍্যাপ করতে হবে, যার মাধ্যমে এর অগ্রাধিকার কমিয়ে দিতে হবে।

আসুন চাইল্ড কম্পোনেন্ট ProductList এর নিম্নলিখিত কোডের স্নিপেটটি বিশ্লেষণ করি:

import {useDeferredValue} from 'react'

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

মনোযোগ দিন, এখানে আমরা useDeferredValue দিয়ে products ভেরিয়েবল自身কে র‍্যাপ করেছি, যা আমরা কম্পোনেন্টের প্রপ্স থেকে নিয়েছি। তারপর আমরা ফলাফলটি deferredProducts এ লিখেছি, যার সাথে আমরা পরবর্তীতে কাজ করব:

const deferredProducts = useDeferredValue(products);

এখন, যদি আমরা পূর্ববর্তী পাঠে বিবেচনা করা মূল কম্পোনেন্টের কোড স্নিপেট থেকে এই লাইনটি সরিয়ে ফেলি:

const [isPending, startTransition] = useTransition();

এবং isPending ব্যবহার করে এই লাইনটি:

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

এবং setFilterTerm ফাংশন থেকে র‍্যাপ সরিয়ে ফেলি, তাহলে আমরা পূর্ববর্তী পাঠের মতো একই ফলাফল পাব:

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