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

এই পাঠে, আমরা পারফরম্যান্স অপ্টিমাইজেশনের জন্য নিম্নলিখিত হুকটি বিবেচনা করব useCallback.

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

আসুন একটি উদাহরণ দিয়ে আরও বিশদে বুঝতে পারি। প্রথমে একটি App কম্পোনেন্ট তৈরি করি এবং এতে একটি num স্টেট রাখি:

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

আমাদের একটি বাটন থাকুক, ক্লিক করলে যাতে num বৃদ্ধি পায় 1 দ্বারা, এবং একটি অনুচ্ছেদ, যাতে আমরা num-এর মান প্রদর্শন করব:

return (
	<div>
		<button onClick={() => setNum(num + 1)}>ক্লিক করুন</button>
		<p>ক্লিক: {num}</p>
	</div>
);

এবং এখন, ধরে নিন যে আমাদের App-এ আরও কিছু আইটেম সহ একটি তালিকা রয়েছে প্রদর্শিত হচ্ছে, যা আমরা অন্য একটি বাটন চেপে যোগ করব। এই তালিকার আইটেমগুলি সংরক্ষণ করার জন্য আমরা একটি স্টেট items রাখব:

const [items, setItems] = useState([]);

এবং তারপর addItem ফাংশন লিখব সেগুলি যোগ করার জন্য:

function addItem() {
	setItems([...items, 'নতুন আইটেম']);
}

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

function Items({ items, addItem }) {

	const result = items.map((item, index) => {
		return <p key={index}>{item}</p>;
	});
	
	console.log('Items রেন্ডার');
	
	return (
		<div>
			<h3>আমাদের আইটেমসমূহ</h3>
			{result}
			<button onClick={addItem}>আইটেম যোগ করুন</button>
		</div>
	);
}

export default Items;

App কম্পোনেন্টের শেষে Items রাখি এবং এটিকে অ্যারে items এবং আইটেম যোগ করার ফাংশন addItem প্রপ্স হিসেবে পাস করি:

return (
	<>
		<div>
			<button onClick={() => setNum(num + 1)}>ক্লিক করুন</button>
			<p>ক্লিক: {num}</p>
			<br />
		</div>
		<Items items={items} addItem={addItem} />
	</>
);

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

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

তাহলে আসুন আমাদের Items কম্পোনেন্টটিকে memo-তে মোড়ক করি এবং সবকিছু ঠিক হয়ে যাবে। যাইহোক এটি সরাসরি Items রপ্তানির সময় করা যেতে পারে:

export default memo(Items);

memo ইম্পোর্ট করতে ভুলবেন না:

import { memo } from 'react';

এবং এখন কনসোল খুলি এবং বাটনে ক্লিক করি। সমস্ত প্রচেষ্টা বৃথা! আমরা কম্পোনেন্টটি মেমোইজড করেছি, কিন্তু 'ক্লিক করুন' বাটনে ক্লিক করলে কম্পোনেন্ট Items এখনও প্রতিবার পুনরায় রেন্ডার হয়।

সমস্যা হল যে যখন প্যারেন্ট কম্পোনেন্ট পুনরায় রেন্ডার হয়, তার ফাংশনগুলি পুনরায় তৈরি হয় - এটি আমাদের addItem ফাংশনকেও প্রভাবিত করে, যা আমরা Items-এ পাস করি।

ঠিক এই মুহূর্তে আমাদের সাহায্য করবে হুক useCallback। আসুন এটি প্রয়োগ করি। প্রথমে এটিকে App-এ ইম্পোর্ট করি:

import { useCallback } from 'react';

তারপর addItem ফাংশনের সাধারণ ঘোষণাকে ফাংশন এক্সপ্রেশন-এ পরিবর্তন করি, useCallback-এর প্রথম প্যারামিটার হিসেবে কলব্যাক আকারে আমাদের ফাংশন নির্দিষ্ট করি। দ্বিতীয় প্যারামিটার হিসেবে বর্গাকার বন্ধনীতে নির্ভরতা নির্দিষ্ট করি - সমস্ত রিয়েক্টিভ ভেরিয়েবল, যা ফাংশনে অংশগ্রহণ করে, আমাদের ক্ষেত্রে এটি অ্যারে items:

const addItem = useCallback(() => {
	setItems(() => [...items, 'নতুন আইটেম']);
}, [items]);

সম্পন্ন! এইভাবে আমরা ফাংশনটি ক্যাশে করেছি। আবার বাটনে ক্লিক করি এবং দেখি যে এখন 'ক্লিক করুন' বাটনে ক্লিক করলে আমাদের চাইল্ড কম্পোনেন্ট পুনরায় রেন্ডার হয় না।

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

একটি চাইল্ড কম্পোনেন্ট Products তৈরি করুন, যেখানে আপনার একটি নতুন পণ্য যোগ করার জন্য বাটন থাকবে। এটিকে App-এ রাখুন। প্যারেন্ট কম্পোনেন্টে পণ্যের অ্যারে সহ একটি স্টেট তৈরি করুন এবং একটি নতুন পণ্য যোগ করার ফাংশন তৈরি করুন। সেগুলিকে প্রপ্স হিসেবে চাইল্ড কম্পোনেন্টে পাস করুন, এতে পাস করা অ্যারেটিকে ul তালিকা আকারে আউটপুট করুন।

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

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