React-এ পারফরম্যান্স অপ্টিমাইজেশন হুক useMemo

পারফরম্যান্স অপ্টিমাইজেশনের জন্য প্রথম হুক যেটি আমরা বিবেচনা করব সেটি হল useMemo।

এই হুকটি পুনরায় রেন্ডারের মধ্যে ব্যয়বহুল অপারেশনের ফলাফল ক্যাশে করতে সাহায্য করে এবং সেই অনুযায়ী অনাবশ্যক ভারী গণনা এড়াতে পারে। এই ধরনের ক্যাশিং কেও মেমোইজেশন বলা হয়।

দেখি, এটা কিভাবে কাজ করে। আসুন একটি বাটন এবং h3 হেডিং সহ একটি কম্পোনেন্ট তৈরি করি:

return (
	<div>
		<h3>Text</h3>
		<button>click</button>
	</div>
);

এবং এখন এমন করা যাক যাতে ক্লিক করলে হেডিং এর রঙ কমলা থেকে সবুজে পরিবর্তিত হয় এবং উল্টো। শুরুতে একটি isGreen স্টেট তৈরি করি:

const [isGreen, setIsGreen] = useState(false);

হেডিং এর style অ্যাট্রিবিউটে হেডিং এর রঙ পরিবর্তনের শর্ত যোগ করি এবং ক্লিক হ্যান্ডলার যোগ করি:

<h3 onClick={() => setIsGreen(!isGreen)}
	style={{ color: isGreen ? 'green' : 'orangered' }}
>Text</h3>

আমাদের কিছু মানও থাকুক, যা বাটনে ক্লিক করলে এক করে বৃদ্ধি পাবে। এর জন্য একটি স্টেট তৈরি করি:

const [num, setNum] = useState(0);

বাটনে ক্লিক হ্যান্ডলিং যোগ করি:

<button onClick={() => setNum(num + 1)}>
	clicks
</button>

আমাদের একটি square ফাংশনও থাকুক, যা num মানের বর্গ প্রদান করবে। ফাংশন কলের ফলাফল আমরা result ভেরিয়েবলে রাখব:

const result = square(num);

function square(num) {
	return num * num;
}

বাটনের টেক্সটে result দেখাই:

<button onClick={() => setNum(num + 1)}>
	clicks: {result}
</button>

ফলস্বরূপ আমরা নিম্নলিখিতটি পেয়েছি: বাটনে ক্লিক করলে num মান পরিবর্তিত হয়, যা তারপর বর্গ করা হয়, এবং হেডিং এ ক্লিক করলে হেডিং এর রঙ পরিবর্তিত হয়।

আমাদের কম্পোনেন্টটি খুব ছোট, সবকিছু দ্রুত কাজ করে, যদিও হেডিং এ ক্লিক করে এর রঙ পরিবর্তন করলে পুরো কম্পোনেন্টটি আবার রেন্ডার হয়, সেই অনুযায়ী গণনাগুলিও আবার ঘটে, যেগুলো বাটনের সাথে যুক্ত, এটি এমনকি তখনও যখন আমরা বাটন স্পর্শ করিনি। আর এখন কল্পনা করুন, যদি আমাদের গণনা ভারী হত এবং প্রতিবার সবকিছু আবার গণনা করা হত।

আসুন, আমাদের ফাংশনটি একটু ভারী করি, এখন এটি একটু বেশি সময় ধরে চিন্তা করবে। এভাবে আমরা দীর্ঘ গণনার ভান করব:

function square(num) {
	let startTime = performance.now();
	
	while (performance.now() - startTime < 500) {
		// শুধু কিছুই করো না ...
	}
	
	return num * num;
}

এখন হেডিং এ ক্লিক করুন। দেখা যাচ্ছে, যে এখন ফাংশনটির দীর্ঘ কাজ করার কারণে square (আর আমরা তো বাটন স্পর্শ করিনি) আমাদের হেডিং এর রঙ পরিবর্তন করতে একটু বেশিই সময় অপেক্ষা করতে হবে!

এখানেই useMemo হুক আমাদের সাহায্যে আসবে। এর জন্য, আমাদের প্রথম প্যারামিটার হিসেবে একটি ফাংশন পাঠাতে হবে, যা যে মানটি আমরা ক্যাশে করতে চাই তা গণনা করবে, এই ফাংশনটি বিশুদ্ধ হতে হবে এবং কোনো প্যারামিটার গ্রহণ করবে না। এবং দ্বিতীয় প্যারামিটার হিসেবে - বর্গাকার বন্ধনীতে ডিপেন্ডেন্সি, অন্য কথায়, সমস্ত রিয়েক্টিভ মান যা ফাংশনের কোডে অংশগ্রহণ করে। এইভাবে, result তে আমরা এখন এইরকম একটি কনস্ট্রাকশন লিখব:

const result = useMemo(() => square(num), [num]);

আবার হেডিং এ ক্লিক করি। এখন, যদি আমরা গণনার বাটন স্পর্শ না করি এবং এইভাবে num স্টেটের মান পরিবর্তন না করি, তাহলে কিছুই পুনরায় গণনা করা হয় না, এবং React বাটনে ক্যাশে করা মান দেখায়, তাই আমাদের হেডিং দ্রুত তার রঙ পরিবর্তন করে।

একটি App কম্পোনেন্ট তৈরি করুন, এতে একটি প্যারাগ্রাফ রাখুন। প্রারম্ভিক মান 'react' সহ একটি text স্টেট তৈরি করুন, স্টেটের মান যেন প্যারাগ্রাফের টেক্সট হিসেবে দেখায়। প্যারাগ্রাফে ক্লিক করলে যেন এর টেক্সটের শেষে একটি বিস্ময়বোধক চিহ্ন যোগ হয়।

আরও একটি num স্টেট তৈরি করুন, প্রারম্ভিক মান 0 সহ। App এ আরও একটি প্যারাগ্রাফ রাখুন। এমন করুন, যাতে এতে ক্লিক করলে num 1 করে বৃদ্ধি পায়।

এবং এখন App এ triple ফাংশন যোগ করুন, যা প্যারামিটার হিসেবে num গ্রহণ করে এবং এর তিনগুণ মান প্রদান করে। ফাংশন কলের ফলাফল result ভেরিয়েবলে রাখুন। দ্বিতীয় প্যারাগ্রাফের টেক্সট হিসেবে result দেখান। পালাক্রমে প্যারাগ্রাফে ক্লিক করুন, লক্ষ্য করুন, বিস্ময়বোধক চিহ্ন যোগ হতে কত ধীর।

স্থিতি সংশোধন করুন, ধীর ফাংশন triple কে useMemo এ রেখে।