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

পারফরম্যান্স অপ্টিমাইজেশন হুক useTransition আমাদেরকে গ্রাফিক্যাল ইন্টারফেস ব্লক না করেই স্টেট আপডেট করতে দেয়।

এই হুকের সাহায্যে আমরা কোনও স্টেটের আপডেটকে কম অগ্রাধিকার দিতে পারি, যা অন্যান্য স্টেটের আপডেটকে উচ্চ অগ্রাধিকার পেতে এবং বিলম্ব ছাড়াই কার্যকর হতে দেয়।

একটি উদাহরণ হিসাবে, ব্যবহারকারীর সার্চ ফিল্ডে অক্ষর প্রবেশ করানোর সময় পণ্যের ড্রপ-ডাউন তালিকা ফিল্টার করা উল্লেখ করা যেতে পারে। অবশ্যই, তালিকাটি কিছু বিলম্ব সহ প্রদর্শিত হতে পারে, তবে আমরা চাই না যে সার্চ ফিল্ডে অক্ষরগুলি বিলম্ব সহ প্রবেশ করানো হোক।

আসুন দেখি কিভাবে এই ধরনের ক্ষেত্রে হুক 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>আপডেট হচ্ছে ...</p>}
		<ProductList products={filteredProducts} />
	</div>
);