কেন আপনার React Key Prop প্রয়োজন
আপনি আপনার কনসোলে এই এররটি দেখতে পাবেন: "Each child in a list should have a unique 'key' prop."
অনেক ডেভেলপার এটি উপেক্ষা করেন। এটি একটি ভুল। এই ওয়ার্নিংটি আপনাকে পারফরম্যান্স সমস্যা এবং সম্ভাব্য বাগ (bugs) সম্পর্কে সতর্ক করে।
key prop কী? এটি React-কে একটি লিস্টের নির্দিষ্ট আইটেমগুলো চিনতে সাহায্য করে। এটি React-কে জানায় কোন আইটেমটি পরিবর্তিত হয়েছে, সরানো হয়েছে বা মুছে ফেলা হয়েছে। key ছাড়া, প্রতিবার কিছু পরিবর্তন হলে React পুরো লিস্টটি পুনরায় রেন্ডার (re-render) করে। এটি আপনার অ্যাপের গতি কমিয়ে দেয়।
১০০০টি বই আছে এমন একটি লাইব্রেরির কথা ভাবুন। আপনি যদি মাঝখানে একটি নতুন বই যোগ করেন, তবে জায়গা করার জন্য আপনাকে অন্য প্রতিটি বই সরিয়ে ফেলতে হবে। একটি key প্রতিটি বইয়ের জন্য একটি ইউনিক ID হিসেবে কাজ করে। এটি অন্য সবকিছু না সরিয়েই React-কে সঠিক জায়গাটি খুঁজে পেতে সাহায্য করে।
The Reconciliation Process React নতুন Virtual DOM-এর সাথে পুরনোটির তুলনা করার জন্য একটি diffing algorithm ব্যবহার করে।
- State পরিবর্তিত হয়।
- React একটি নতুন tree তৈরি করে।
- React key ব্যবহার করে tree-গুলোর মধ্যে তুলনা করে।
- React শুধুমাত্র পরিবর্তিত এলিমেন্টগুলো আপডেট করে।
সাধারণ ভুল: array index-কে key হিসেবে ব্যবহার করা।
আপনার লিস্ট যদি পরিবর্তনশীল হয়, তবে কখনোই key={index} ব্যবহার করবেন না। আপনি যদি আইটেম যোগ বা ডিলিট করেন, তবে প্রতিটি আইটেমের ইনডেক্স বদলে যায়। এতে React বিভ্রান্ত হয়ে পড়বে এবং যে আইটেমগুলো আসলে পরিবর্তিত হয়নি সেগুলোকেও পুনরায় রেন্ডার করবে। এটি মেমরি অপচয় করে এবং UI bugs তৈরি করে।
এটি কীভাবে ঠিক করবেন:
- আপনার ডাটাবেস থেকে একটি stable ID ব্যবহার করুন (যেমন
user.id)। - যদি আপনার ডাটাতে কোনো ID না থাকে, তবে
uuid-এর মতো একটি ইউনিক স্ট্রিং ব্যবহার করুন। - key-এর জন্য
Math.random()ব্যবহার করা এড়িয়ে চলুন। এটি প্রতিবার রেন্ডারের সময় একটি নতুন ID তৈরি করে, যা কম্পোনেন্টগুলোকে পুনরায় re-mount করতে বাধ্য করে এবং এর ফলে UI flickering হতে পারে।
Best practices:
- Keys অবশ্যই stable হতে হবে।
- Siblings-দের মধ্যে Keys অবশ্যই ইউনিক হতে হবে।
- সেরা পারফরম্যান্সের জন্য ডাটাবেস ID ব্যবহার করুন।
Key Comparison Table: • Database ID: সুপারিশকৃত। Stable এবং দ্রুত। • Array Index: সুপারিশ করা হয় না। সর্টিং বা ফিল্টারিং করার সময় বাগ তৈরি করতে পারে। • Math.random(): এড়িয়ে চলুন। এটি অপ্রয়োজনীয় re-mount তৈরি করে।
আপনার কাজের জন্য সারসংক্ষেপ: আপনি যদি এই এররটি দেখেন, তবে বুঝতে হবে আপনার কম্পোনেন্টগুলোতে কোনো স্থায়ী আইডেন্টিফায়ার নেই। আপনার API রেসপন্সে email বা ID-এর মতো ইউনিক ফিল্ড আছে কিনা তা পরীক্ষা করুন। অপ্রয়োজনীয় re-renders কমিয়ে ৩০-৪০% পারফরম্যান্স বাঁচাতে এটি ঠিক করুন।