React Lists এবং Keys আয়ত্ত করুন
React-এ লিস্ট রেন্ডার করা সহজ, কিন্তু সঠিকভাবে করা কঠিন।
অনেক ডেভেলপার array index-কে key হিসেবে ব্যবহার করেন। এটি একটি ভুল। এর ফলে বাগ (bug) এবং ধীরগতির পারফরম্যান্সের সমস্যা দেখা দিতে পারে।
React-এ ডাইনামিক ডেটা কীভাবে হ্যান্ডেল করবেন তা নিচে দেওয়া হলো।
React কীভাবে লিস্ট ব্যবহার করে
React অ্যারে-কে UI এলিমেন্টে রূপান্তর করতে map() মেথড ব্যবহার করে। যখন আপনি map() ব্যবহার করেন, React ডেটার প্রতিটি অংশকে একটি কম্পোনেন্টে রূপান্তরিত করে।
Keys-এর ভূমিকা React একটি Virtual DOM ব্যবহার করে। যখন ডেটা পরিবর্তিত হয়, React নতুন ডেটার সাথে পুরনো ডেটার তুলনা করে। এই প্রক্রিয়াটিকে reconciliation বলা হয়।
Keys ইউনিক আইডেন্টিফায়ার হিসেবে কাজ করে। এগুলো React-কে সুনির্দিষ্টভাবে জানায় কোন আইটেমটি পরিবর্তিত হয়েছে, সরানো হয়েছে বা মুছে ফেলা হয়েছে।
কেন Index-কে Key হিসেবে ব্যবহার করা বিপজ্জনক Index (0, 1, 2...) কে key হিসেবে ব্যবহার করলে তিনটি প্রধান সমস্যা দেখা দেয়:
- Component State Errors: আপনি যদি একটি লিস্ট সর্ট (sort) করেন, তবে ইনপুট ফিল্ড বা চেকবক্স ভুল আইটেমের ডেটা দেখাতে পারে।
- Performance Drops: React ট্র্যাক করতে পারে না কোন আইটেমটি কোনটি। এটি প্রায়শই শুধুমাত্র একটি আইটেমের পরিবর্তে পুরো লিস্টটিই পুনরায় রেন্ডার (re-render) করে।
- Visual Bugs: আপনার UI দেখতে সঠিক মনে হতে পারে, কিন্তু আইটেমগুলো স্থান পরিবর্তন করলে ইন্টারনাল লজিক কাজ করা বন্ধ করে দেবে।
Keys ব্যবহারের সঠিক পদ্ধতি আপনার অ্যাপ দ্রুত এবং স্থিতিশীল রাখতে এই নিয়মগুলো অনুসরণ করুন:
- Unique IDs ব্যবহার করুন: সবসময় আপনার ডেটাবেস থেকে আসা ID (যেমন UUID বা primary key) ব্যবহার করুন।
- কখনোই
Math.random()ব্যবহার করবেন না: রেন্ডারিংয়ের সময় key জেনারেট করলে প্রতিবার আপডেট হওয়ার সময় React প্রতিটি এলিমেন্ট নতুন করে তৈরি করে। এটি পারফরম্যান্স কমিয়ে দেয়। - Keys স্থিতিশীল রাখুন: একটি নির্দিষ্ট ডেটার জন্য তার পুরো লাইফসাইকেল জুড়ে key একই থাকা উচিত।
এক নজরে তুলনা
Feature: Stability Using Index: অস্থিতিশীল (Unstable) Using Unique ID: অত্যন্ত স্থিতিশীল (Highly Stable)
Feature: Performance Using Index: খারাপ (Poor) Using Unique ID: সর্বোত্তম (Optimal)
Feature: State Safety Using Index: অনিরাপদ (Unsafe) Using Unique ID: ১০০% নিরাপদ (100% Safe)
ডেভেলপারদের জন্য সারসংক্ষেপ
map() মেথড ব্যবহার করুন। key প্রপে একটি ইউনিক এবং স্থিতিশীল ID পাস করুন। যে কোনো লিস্ট যা পরিবর্তন, সর্ট বা ফিল্টার করা হতে পারে, সেখানে array index ব্যবহার করা এড়িয়ে চলুন।