React-এ List & Keys – বিস্তারিত বাংলায় ব্যাখ্যা

React অ্যাপ্লিকেশনে বেশিরভাগ সময়ই আমাদের list of data দেখাতে হয়। যেমন: user list, product list, comments list, todo list ইত্যাদি। Array এর আইটেমগুলোকে React-এর JSX-এ দেখানোর জন্য list rendering ব্যবহার করা হয়। আর list rendering-এর সবচেয়ে গুরুত্বপূর্ণ অংশ হলো Keys।

🔹 List Rendering কী?

Array-এর ভেতরের data-কে JSX-এর ভেতরে map() ব্যবহার করে রেন্ডার করাই হলো List Rendering। React সরাসরি loops যেমন for ব্যবহার করতে পারে না, তাই map() ব্যবহার করাই standard rule।

🔹 List Rendering এর Basic Example

ধরি আমাদের কাছে একটি নামের list আছে:

function NameList() {
  const names = ["Rahim", "Karim", "Sanjida"];

  return (
    <ul>
      {names.map((name) => (
        <li>{name}</li>
      ))}
    </ul>
  );
}

export default NameList;

✔ ব্যাখ্যা

• names array এর প্রতিটি item map() দিয়ে loop করা হচ্ছে
• map() → array item → JSX return করে
• প্রতি item UI-তে একটি <li> হিসেবে প্রদর্শিত হবে

🔹 Keys কী? কেন দরকার?

React যখন list রেন্ডার করে তখন প্রতিটি item-এর একটি unique identity দরকার হয়। এটি React-কে বলে দেয় কোন item পরিবর্তিত হয়েছে, কোনটি নতুন, আর কোনটি মুছে গেছে। এই কাজের জন্য key ব্যবহার করা হয়।

Key ছাড়া React list-এর প্রতিটি item ঠিকভাবে ট্র্যাক করতে পারে না এবং warning দেয়।

🔹 Key সহ List Rendering

function NameList() {
  const names = ["Rahim", "Karim", "Sanjida"];

  return (
    <ul>
      {names.map((name, index) => (
        <li key={index}>{name}</li>
      ))}
    </ul>
  );
}

✔ ব্যাখ্যা

• প্রতিটি item-এর সাথে unique key দেয়া হয়েছে
• এখানে index ব্যবহার করা হয়েছে (small lists এর জন্য acceptable)

🔹 কেন key ব্যবহার বাধ্যতামূলক?

Key React-কে সাহায্য করে:

• কোন item add হয়েছে
• কোন item delete হয়েছে
• কোন item পরিবর্তিত হয়েছে

Key না দিলে React বারবার component গুলো পুনরায় re-render করে, যার ফলে performance কমে।

🔹 Unique ID কে key হিসেবে ব্যবহার করা সবচেয়ে ভালো

যদি আপনার data-তে unique id থাকে, সেটি key হিসেবে ব্যবহার করুন।

function UserList() {
  const users = [
    { id: 1, name: "Rahim" },
    { id: 2, name: "Karim" },
    { id: 3, name: "Sonia" }
  ];

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

🔥 Best Practice:

Always use unique IDs as keys. Index only use when list never changes.

🔹 List of Components Example

আপনি চাইলে list item-দের আলাদা component হিসেবেও তৈরি করতে পারেন।

// Child Component
function User({ name }) {
  return <li>{name}</li>;
}

// Parent Component
function UserList() {
  const users = ["Rahim", "Karim", "Sonia"];

  return (
    <ul>
      {users.map((user, index) => (
        <User key={index} name={user} />
      ))}
    </ul>
  );
}

এটি কোড clean রাখে এবং বড় প্রজেক্টে maintain করা সহজ হয়।

🔹 Conditional List Rendering

Data না থাকলে “No data found” দেখানো:

function ProductList({ products }) {
  return (
    <div>
      {products.length === 0 ? (
        <p>No Products Found</p>
      ) : (
        <ul>
          {products.map((p) => (
            <li key={p.id}>{p.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

🔹 Keys এর ভুল ব্যবহার

❌ Example – Bad Practice

{items.map((item) => (
  <li key={Math.random()}>{item}</li>
))}

⚠ প্রতিবার random key বদলে যায় → React চিনতে পারে না → performance খারাপ

🔹 Keys এর Best Practices

• Unique ID কে key হিসেবে ব্যবহার করুন
• Data যদি stable না হয়, index ব্যবহার করবেন না
• key অবশ্যই sibling elements এর মধ্যে unique হতে হবে
• key component-এর বাইরে থেকে পাঠাতে হবে

🔹 Summary

• map() ব্যবহার করে list render করা হয়
• key React-কে বলে কোন item পরিবর্তিত হয়েছে
• list items-এর জন্য unique key ব্যবহার করুন
• keys ছাড়া list render করলে React warning দেয়
• Best practice → data-এর unique id ব্যবহার করা

🎉 শেষ কথা

React-এ dynamic data দেখানোর ক্ষেত্রে List & Keys সবচেয়ে গুরুত্বপূর্ণ কনসেপ্টের একটি। এটি ভালোভাবে শিখলে বড় এবং জটিল UI খুব সহজে তৈরি করা যায়।