ReactJS-এ key অ্যাট্রিবিউট একটি গুরুত্বপূর্ণ ভূমিকা পালন করে যখন কম্পোনেন্টগুলির মধ্যে এলিমেন্টের তালিকা (list) রেন্ডার করা হয়। এটি React-এর রেন্ডারিং পদ্ধতির জন্য একটি নির্ধারণকৃত কী ব্যবহারের মাধ্যমে কম্পোনেন্টের প্রতিটি উপাদান (element) চিহ্নিত করতে সহায়তা করে। key অ্যাট্রিবিউট ব্যবহারের মাধ্যমে React খুব সহজেই যেকোনো পরিবর্তন, যেমন উপাদান যোগ করা, সরানো বা আপডেট করার ক্ষেত্রে পারফরম্যান্স অপটিমাইজ করতে পারে।
key এর প্রয়োজনীয়তা
যখন আপনি React-এ একটি তালিকা বা অ্যারে রেন্ডার করেন, যেমন একটি map ফাংশন ব্যবহার করে একাধিক কম্পোনেন্ট তৈরি করেন, তখন React জানে না কোন উপাদানটি পরিবর্তন হয়েছে বা কোনটি সরানো হয়েছে। যদি আপনি প্রতিটি উপাদানকে একটি key প্রদান না করেন, তবে React প্রতিটি উপাদানকে নতুন হিসেবে চিহ্নিত করবে এবং নতুন করে পুরো তালিকাটি রেন্ডার করবে, যা কার্যকারিতায় নেতিবাচক প্রভাব ফেলতে পারে।
key অ্যাট্রিবিউট React কে এটি নির্ধারণ করতে সাহায্য করে যে, কোন উপাদানটি পরিবর্তন হয়েছে, কোনটি নতুন হয়েছে এবং কোনটি সরানো হয়েছে। এর ফলে, React দ্রুত এবং কার্যকরভাবে UI আপডেট করতে পারে।
key এর ব্যবহার
১. তালিকা রেন্ডার করার সময়
React-এ তালিকা রেন্ডার করার সময় প্রতিটি উপাদানকে একটি অনন্য key প্রদান করতে হয়। সাধারণত এই key একটি ইউনিক আইডি বা ইনডেক্স হতে পারে।
const items = ['apple', 'banana', 'cherry'];
function FruitList() {
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}
এখানে, key={index} দিয়ে প্রতিটি তালিকা উপাদানকে একটি কিপরিচিত (unique) key প্রদান করা হয়েছে। তবে, এটি সাধারণত পরামর্শিত নয়, কারণ যদি তালিকায় কোনো উপাদান সরানো হয় বা আনা হয়, তাহলে React আসল উপাদানগুলিকে চিহ্নিত করতে পারবে না, ফলে UI নষ্ট হতে পারে।
২. একটি ইউনিক আইডি ব্যবহার করা
তবে, ভালো অভ্যাস হল যে আপনি তালিকার প্রতিটি উপাদানের জন্য একটি ইউনিক আইডি ব্যবহার করুন। সাধারণত ডেটাবেস থেকে নেওয়া ডাটা বা কোনো ভেরিয়েবল থেকে এই key প্রাপ্ত করা যায়।
const items = [
{ id: 1, name: 'apple' },
{ id: 2, name: 'banana' },
{ id: 3, name: 'cherry' }
];
function FruitList() {
return (
<ul>
{items.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}
এখানে, key={item.id} দিয়ে প্রতিটি তালিকা উপাদানকে একটি ইউনিক আইডি দেওয়া হয়েছে, যা React-এর জন্য প্রতিটি উপাদান চিহ্নিত করা সহজ করে।
key এর সুবিধা
১. পারফরম্যান্স অপটিমাইজেশন
key অ্যাট্রিবিউট React-কে উপাদানগুলোকে ট্র্যাক করতে সাহায্য করে এবং প্রয়োজনীয় পরিবর্তনগুলো দ্রুত করতে দেয়, যাতে UI-র শুধুমাত্র প্রয়োজনীয় অংশই আপডেট হয়। এর ফলে, পারফরম্যান্স উন্নত হয়।
২. উপাদানের সঠিক পরিচিতি
key অ্যাট্রিবিউট উপাদানগুলোর সঠিক পরিচিতি প্রদান করে, যাতে React জানে কোন উপাদানটি পরিবর্তিত হয়েছে, কোনটি সরানো হয়েছে এবং কোনটি নতুনভাবে যোগ করা হয়েছে। এর মাধ্যমে, উপাদানের স্থিতি (state) বা এন্ট্রি রেঞ্জ হালনাগাদ করা হয়।
৩. তালিকায় উপাদান যোগ, সরানো বা আপডেট করা
যখন কোনো উপাদান তালিকা থেকে সরানো হয় অথবা নতুন উপাদান যোগ করা হয়, তখন key React-কে জানায় কোন উপাদানটি পরিবর্তন হয়েছে। এটি খুব দ্রুত রেন্ডারিং প্রক্রিয়া করে এবং UI এর সঠিকতা বজায় রাখে।
key এর সীমাবদ্ধতা
১. কেবল তালিকার উপাদানগুলোর জন্য
key শুধুমাত্র তালিকা (list) বা অ্যারে রেন্ডার করার জন্য ব্যবহৃত হয়। একক কম্পোনেন্টের ক্ষেত্রে key ব্যবহারের কোনো প্রয়োজন নেই।
২. ইনডেক্স ব্যবহার থেকে বিরত থাকা
যখন আপনি তালিকার আইটেমগুলোর অবস্থান পরিবর্তন বা আপডেট করবেন, তখন ইনডেক্স (key={index}) ব্যবহার করা পরামর্শিত নয়। ইনডেক্স ব্যবহার করলে React তালিকার মধ্যে উপাদানগুলির সঠিক পরিচিতি রাখতে পারে না, যার ফলে UI-এ ভুল রেন্ডারিং হতে পারে।
সারাংশ
ReactJS-এ key অ্যাট্রিবিউট একটি অত্যন্ত গুরুত্বপূর্ণ ভূমিকা পালন করে, বিশেষ করে যখন আপনি তালিকা বা অ্যারে রেন্ডার করেন। এটি React-কে প্রতিটি উপাদানকে সঠিকভাবে চিহ্নিত করতে সাহায্য করে, যাতে UI দ্রুত এবং কার্যকরভাবে আপডেট করা যায়। key ব্যবহার করার মাধ্যমে React পারফরম্যান্স উন্নত করে এবং সঠিকভাবে UI রেন্ডার করে।
Read more
