রিয়াক্টে লিস্ট রেন্ডারিং এবং key এর ব্যাবহার

React-এ ডেটার একটি তালিকা বা Array থেকে ডেটা রেন্ডার করা একটি সাধারণ ও প্রয়োজনীয় কাজ। আমরা সাধারণত map, filter, এবং অন্যান্য লজিকাল ফাংশন ব্যবহার করে ডেটা উপস্থাপন করি। এই প্রক্রিয়াটি UI-তে ডাইনামিক তথ্য উপস্থাপন করতে সহায়তা করে।

লিস্ট রেন্ডারিং উদাহরণ

লিস্টের উপাদানগুলি রেন্ডার করার জন্য, আমরা map ফাংশন ব্যবহার করতে পারি। নিচে একটি উদাহরণ দেওয়া হল যেখানে ব্যবহারকারীদের একটি তালিকা রেন্ডার করা হচ্ছে:

উদাহরণ:

const users = ["Mr x", "Mr y", "Mr z"];
 
export function ListOfUser() {
  const userList = users.map((person) => <li key={person}>{person}</li>); // Map over users
  return <ul>{userList}</ul>; // Return the list
}

ব্যাখ্যা:

• users Array: এখানে users নামের একটি Array তৈরি করা হয়েছে, যা বিভিন্ন ব্যবহারকারীর নাম ধারণ করে।
• map ফাংশন: map ফাংশন ব্যবহার করে, প্রতিটি ব্যবহারকারীকে <li> ট্যাগে রেন্ডার করা হচ্ছে। map ফাংশন প্রতিটি উপাদানের জন্য একটি নতুন লিস্ট উপাদান তৈরি করে এবং সেই উপাদানগুলিকে <ul> ট্যাগের মধ্যে রিটার্ন করা হচ্ছে।
• key প্রপার্টি: React-এ তালিকা রেন্ডার করার সময় প্রতিটি উপাদানের জন্য একটি ইউনিক key প্রদান করা আবশ্যক।

key এর ব্যাবহার

React-এ লিস্ট অফ আইটেম রেন্ডার করার সময়, প্রতিটি এলিমেন্টে একটি key প্রপার্টি অবশ্যই থাকতে হবে। key রেন্ডারিং পারফরম্যান্স উন্নত করতে এবং DOM আপডেটের সময় উপাদানগুলোকে সঠিকভাবে ট্র্যাক করতে সাহায্য করে।

উদাহরণ:

const users = [
  {
    id: 1,
    name: "Mr X",
  },
  {
    id: 2,
    name: "Mr XX",
  },
];
 
export function ListOfUser() {
  const userList = users.map((person) => (
    <li key={person.id}>{person.name}</li>
  )); // Use unique key
  return <ul>{userList}</ul>;
}

ব্যাখ্যা:

• users Array: এখানে users একটি Array, যা ব্যবহারকারীর নাম এবং id ধারণ করে।
• key প্রপার্টি: person.id কে key হিসেবে ব্যবহার করা হয়েছে। এটি নিশ্চিত করে যে প্রতিটি <li> উপাদান ইউনিক এবং React সহজে আইটেমগুলোকে ট্র্যাক করতে পারে।
• পারফরম্যান্স: key ব্যবহার করলে React প্রক্রিয়াকরণের সময় পারফরম্যান্স বৃদ্ধি পায় কারণ এটি জানে কোন উপাদানগুলিতে পরিবর্তন হয়েছে এবং কিভাবে আপডেট করতে হবে।

key কিভাবে পেতে পারি?

আমরা বিভিন্ন উপায়ে key তৈরি করতে পারি, যেমন:

1. ডাটাবেস থেকে প্রাপ্ত ডাটা:

যখন আমরা ডাটাবেস থেকে তথ্য নিয়ে আসি, সেক্ষেত্রে সাধারণত একটি স্বতন্ত্র id থাকে যা key হিসেবে ব্যবহার করা যেতে পারে।

2. লোকাল ডাটার ক্ষেত্রে:

যদি ডাটা লোকালি তৈরি করা হয়, তাহলে crypto.randomUUID() অথবা uuid লাইব্রেরির মাধ্যমে id/key তৈরি করা যেতে পারে।

উদাহরণ:

import { v4 as uuidv4 } from "uuid";
 
const users = [
  { id: uuidv4(), name: "Mr X" },
  { id: uuidv4(), name: "Mr XX" },
];
 
export function ListOfUser() {
  const userList = users.map((person) => (
    <li key={person.id}>{person.name}</li>
  ));
  return <ul>{userList}</ul>;
}

ব্যাখ্যা:

• uuid লাইব্রেরি: এখানে uuid লাইব্রেরি ব্যবহার করে প্রতিটি ব্যবহারকারীর জন্য একটি ইউনিক id তৈরি করা হয়েছে।
• পারফরম্যান্স এবং ইউনিকনেস: প্রতিটি id ইউনিক এবং নিশ্চিত করে যে React সঠিকভাবে আইটেমগুলোকে ট্র্যাক করতে পারে।

রুলস অফ key

React-এ key ব্যবহার করার কিছু নিয়ম আছে:

1. ইউনিক key:

প্রতিটি key অবশ্যই ইউনিক হতে হবে। একই লিস্টের মধ্যে একই key ব্যবহার করা যাবে না। এটি নিশ্চিত করে যে React সঠিকভাবে আইটেমগুলোকে ট্র্যাক করতে পারে।

2. key পরিবর্তন করা যাবে না:

key পরিবর্তন বা রেন্ডারিংয়ের সময় key জেনারেট করা যাবে না। প্রতিটি রেন্ডারে key একই থাকা উচিত।

3. Array এর ইনডেক্স ব্যবহার করা যাবে না:

Array এর ইনডেক্সকে কখনো key হিসেবে ব্যবহার করা উচিত নয়, কারণ এটি উপাদানগুলোতে সঠিক ট্র্যাকিংয়ের জন্য কার্যকর নয়। ইনডেক্স পরিবর্তনশীল হতে পারে, যা পারফরম্যান্সে নেতিবাচক প্রভাব ফেলতে পারে।

উদাহরণ:

const users = ["Mr X", "Mr Y", "Mr Z"];
 
export function ListOfUser() {
  const userList = users.map((person, index) => <li key={index}>{person}</li>); // Avoid using index as key
  return <ul>{userList}</ul>;
}

ব্যাখ্যা:

• ইনডেক্স ব্যবহার: এখানে index ব্যবহার করা হয়েছে key হিসেবে, যা একটি খারাপ অভ্যাস। এই পদ্ধতি ব্যবহার করা উচিত নয়, কারণ যদি Array পরিবর্তিত হয়, React সঠিকভাবে আইটেমগুলোকে ট্র্যাক করতে পারে না।

রিয়াক্টে key এর প্রয়োজনীয়তা

React-এ key প্রয়োজন কারণ এটি প্রতিটি আইটেমকে ইউনিকভাবে সনাক্ত করতে সাহায্য করে। যখনই লিস্ট থেকে একটি আইটেম মুছে ফেলা হয় বা তালিকায় কোন পরিবর্তন হয়, তখন React সহজে বুঝতে পারে কোন আইটেমে পরিবর্তন হয়েছে। এটি UI-কে দ্রুত এবং কার্যকরভাবে আপডেট করতে সাহায্য করে।

পারফরম্যান্সের উপর প্রভাব:

• ডিফারেন্স ট্র্যাকিং: key ব্যবহার করে, React জানতে পারে কোন উপাদানগুলো নতুন, কোনগুলো মুছে ফেলা হয়েছে এবং কোনগুলো পরিবর্তিত হয়েছে। এটি UI আপডেটের সময় কমপক্ষে রেন্ডারিং প্রয়োগ করে এবং মোট পারফরম্যান্স উন্নত করে।

উপসংহার

React-এ লিস্ট রেন্ডারিং এবং key এর ব্যবহার খুবই গুরুত্বপূর্ণ। সঠিকভাবে key নির্ধারণ করলে আমাদের অ্যাপ্লিকেশনটিকে আরও কার্যকরী এবং দ্রুততম করতে সাহায্য করবে। key সঠিকভাবে ব্যবহার না করলে আমাদের অ্যাপ্লিকেশনের পারফরম্যান্স এবং ব্যবহারকারীর অভিজ্ঞতা নেতিবাচকভাবে প্রভাবিত হতে পারে।