React-এ API memo

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

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

return (
	<div>
		<label>
			নাম:
			<input value={name} onChange={(e) => setName(e.target.value)} />
		</label>
		<br />
		<label>
			উপাধি:
			<input value={surn} onChange={(e) => setSurn(e.target.value)} />
		</label>
	</div>
);

এর জন্য কম্পোনেন্টের শুরুতে স্টেট যোগ করি:

const [name, setName] = useState('');
const [surn, setSurn] = useState('');

আসুন একটি চাইল্ড কম্পোনেন্টও তৈরি করি Child.js, এটি যেন একটি অভিবাদন প্রদর্শন করে, যাতে ইনপুট করা নাম প্রদর্শিত হবে। এছাড়াও, কনসোলে একটি স্ট্রিং 'child render' প্রিন্ট হবে এই কম্পোনেন্টটি প্রতিবার রেন্ডার হওয়ার সময়:

function Child({ name }) {
	console.log('child render');
	return <h3>Hello {name}!</h3>;
}

আসুন Child-কে মূল কম্পোনেন্টের লেআউটে শেষ ইনপুটের পরে যোগ করি এবং প্রপস হিসেবে এটিকে নাম পাঠাব:

<Child name={name} />

এটিকে মেইন কম্পোনেন্টে ইম্পোর্ট করি:

import Child from './Child';

এবার কনসোল খুলে ইনপুট ফিল্ডে নাম এবং উপাধি টাইপ করি। এখানে আমরা দেখতে পাব যে উপাধির ফিল্ডে অক্ষর টাইপ করলেও, আমাদের চাইল্ড কম্পোনেন্ট প্রতিবার পুনরায় রেন্ডার হচ্ছে। কোনো সমস্যা নেই,毕竟 আমাদের কম্পোনেন্টটি ছোট। কিন্তু ভাবুন, যদি এই কম্পোনেন্টটি বড় পরিমাণ ডেটা প্রদর্শন করত এবং সেইসাথে, প্রতিবার পুনরায় রেন্ডার হত।

এবার আসুন চাইল্ড কম্পোনেন্টটিকে memo দিয়ে র‍্যাপ করি, এবং দেখি, রেন্ডারিং কীভাবে পরিবর্তন হয়। প্রথমে এটিতে memo ইম্পোর্ট করি:

import { memo } from 'react';

তারপর একটি নতুন ভেরিয়েবল তৈরি করি এবং এটিকে আমাদের Child অ্যাসাইন করি, যাকে memo দিয়ে র‍্যাপ করা হয়েছে। আমাদের কাছে এটি এইরকম ফাংশন এক্সপ্রেশন হবে:

const Child = memo( function Child({ name }) {
	console.log('child render');
	return <h3>Hello {name}!</h3>;
});

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

মনে রাখতে হবে, এটি কাজ করবে না, যদি অপরিবর্তিত প্রপস থাকা সত্ত্বেও কম্পোনেন্ট দ্বারা ব্যবহৃত স্টেটগুলি পরিবর্তন হয় বা কনটেক্সট, যা পরিবর্তন ব্যবহার করে।

এই পাঠে আমরা যে App কম্পোনেন্টের কোড করেছি, তা নিন, এটি থেকে শুধুমাত্র প্রথম ইনপুটটি রাখুন। একটি React কম্পোনেন্ট Text তৈরি করুন, যাতে একটি প্যারাগ্রাফ থাকে 'long text' টেক্সট সহ, এবং এটিকে App-তে ইনপুটের পরে রাখুন।

Text কম্পোনেন্টে console.log('text render'); লাইনটি যোগ করুন। নিশ্চিত হন যে ইনপুট ফিল্ডে অক্ষর টাইপ করার সময় Text কম্পোনেন্টটি প্রতিবার পুনরায় রেন্ডার হয়।

এবং এখন Text কম্পোনেন্টটিকে memo দিয়ে র‍্যাপ করুন। নিশ্চিত হন, যে ইনপুট ফিল্ডে অক্ষর টাইপ করার সময় Text কম্পোনেন্টটি পুনরায় রেন্ডার হয় না।