কেন আপনার React Key Prop প্রয়োজন
আপনি আপনার কনসোলে এই ওয়ার্নিংটি দেখতে পান: "Each child in a list should have a unique 'key' prop."
অনেক ডেভেলপার এটি উপেক্ষা করেন। এটি একটি ভুল। key prop কেবল একটি সতর্কবার্তা নয়; এটি পারফরম্যান্স উন্নত করার এবং বাগ (bug) প্রতিরোধের একটি টুল।
key prop কী কাজ করে? React লিস্টের আইটেমগুলো শনাক্ত করতে key ব্যবহার করে। এটি React-কে জানায় কোন আইটেমটি পরিবর্তিত হয়েছে, সরানো হয়েছে বা মুছে ফেলা হয়েছে।
key ছাড়া, React-কে পুরো লিস্টটি পুনরায় রেন্ডার (re-render) করতে হয়। এটি আপনার অ্যাপের গতি কমিয়ে দেয় এবং ডেটা সংক্রান্ত বাগ তৈরি করে।
লাইব্রেরির উদাহরণ কল্পনা করুন ১,০০০টি বই আছে এমন একটি লাইব্রেরির কথা। আপনি যদি মাঝখানে একটি নতুন বই যোগ করেন, তবে জায়গা করার জন্য আপনাকে অন্য প্রতিটি বই সরিয়ে নিতে হবে।
React-এ, key একটি ইউনিক আইডি (unique ID) হিসেবে কাজ করে। এটি প্রতিটি এলিমেন্টকে একটি পরিচয় দেয়। reconciliation প্রক্রিয়ার সময়, React নতুন লিস্টের সাথে পুরনো লিস্টের তুলনা করে।
Key না থাকার সমস্যা আপনি যদি key বাদ দেন, তবে React মনে করে প্রতিটি আইটেম একই। আপনি যদি শুরুতে একটি আইটেম যোগ করেন, React মনে করে পুরো লিস্টটিই বদলে গেছে। এটি DOM-এ প্রতিটি এলিমেন্ট পুনরায় তৈরি করে, যা মেমরি এবং CPU অপচয় করে।
Index-এর ফাঁদ
নতুন ডেভেলপাররা প্রায়ই array index-কে key হিসেবে ব্যবহার করেন।
উদাহরণ: key={index}
ডাইনামিক লিস্টের ক্ষেত্রে এটি বিপজ্জনক। আপনি যদি আইটেমগুলো সর্ট (sort), ফিল্টার (filter) বা ডিলিট করেন, তবে index পরিবর্তিত হয়ে যায়। এর ফলে ভুল UI স্টেট এবং বাগ তৈরি হয়।
Key ব্যবহারের সেরা নিয়মাবলী (Best Practices)
- আপনার ডেটাবেস থেকে আসা স্টেবল আইডি (যেমন: user.id) ব্যবহার করুন।
- নিশ্চিত করুন যে siblings বা একই লেভেলের এলিমেন্টগুলোর মধ্যে key গুলো ইউনিক।
- key হিসেবে
Math.random()ব্যবহার করা এড়িয়ে চলুন। এটি প্রতিবার রেন্ডারের সময় পরিবর্তিত হয় এবং UI ফ্লিকারিং (flickering) ঘটায়। - যদি আপনার ডেটাতে কোনো আইডি না থাকে, তবে ডেটা ফেচ (fetch) করার সময়
uuidবাnanoidব্যবহার করে একটি আইডি তৈরি করে নিন।
Key নির্বাচনের নির্দেশিকা
• Database ID: সেরা। অত্যন্ত স্টেবল এবং দ্রুত। • Array Index: শুধুমাত্র সেই স্ট্যাটিক লিস্টের জন্য ব্যবহার করুন যা কখনোই পরিবর্তিত হয় না। • Math.random(): এড়িয়ে চলুন। এটি অপ্রয়োজনীয় re-mount ঘটায়।
সারসংক্ষেপ একটি ভালো key আপনার অ্যাপকে দ্রুততর করে। এটি অপ্রয়োজনীয় re-render প্রায় ৪০% পর্যন্ত কমিয়ে দিতে পারে। সবসময় স্টেবল এবং ইউনিক আইডেন্টিফায়ারকে অগ্রাধিকার দিন।