𝗥𝗲𝗮𝗰𝘁 𝗝𝘀 𝗨𝘀𝗲𝗦𝘁𝗮𝘁𝗲 𝗔𝗻𝘁𝗶𝗽𝗮𝘁𝘁𝗲𝗿𝗻𝘀
পরিষ্কার React কোড লেখার জন্য স্মার্ট স্টেট ম্যানেজমেন্ট প্রয়োজন। ভুল স্টেট প্যাটার্ন বাগ (bugs) এবং জটিল কোডের সৃষ্টি করে।
এই চারটি সাধারণ ভুল এড়িয়ে চলুন:
১. সম্পর্কিত ডেটা গ্রুপ করুন
যেসব ভ্যালু একসাথে পরিবর্তিত হয়, সেগুলোর জন্য আলাদা আলাদা স্টেট হুক তৈরি করবেন না।
এর পরিবর্তে:
- const [x, setX] = useState(0);
- const [y, setY] = useState(0);
একটি অবজেক্ট ব্যবহার করুন:
- const [position, setPosition] = useState({ x: 0, y: 0 });
এটি আপনার আপডেটগুলোকে পরিচ্ছন্ন এবং সুসংগঠিত রাখে।
২. পরস্পরবিরোধী স্টেট এড়িয়ে চলুন
যখন একাধিক বুলিয়ান (boolean) একই প্রসেস ট্র্যাক করে, তখন আপনি বাগ তৈরি করেন।
এর পরিবর্তে:
- isSubmitting
- isSubmit
একটি সিঙ্গেল স্ট্যাটাস স্ট্রিং ব্যবহার করুন:
- status: 'TYPING'
- status: 'SUBMITTING'
- status: 'SUBMITTED'
এই একক সত্যের উৎস (single source of truth) থেকে আপনার UI লজিক তৈরি করুন।
৩. অপ্রয়োজনীয় স্টেট সরিয়ে ফেলুন
আপনি যদি রেন্ডারিংয়ের সময় কোনো ভ্যালু গণনা করতে পারেন, তবে সেটি স্টেটে রাখবেন না।
এগুলো সংরক্ষণ করবেন না:
- firstName
- lastName
- fullName
শুধু প্রথম এবং শেষ নাম সংরক্ষণ করুন। রেন্ডারিংয়ের সময় ফুল নেম গণনা করে নিন:
- const fullName = firstName + " " + lastName;
এছাড়াও, কখনোই প্রপস (props) স্টেটে রাখবেন না। স্টেট শুধুমাত্র একবার ইনিশিয়ালাইজ হয়। যদি আপনার প্রপস পরিবর্তিত হয়, তবে স্টেট আপডেট হবে না। সরাসরি প্রপসটি ব্যবহার করুন।
৪. ডেটা ডুপ্লিকেট করা বন্ধ করুন
একই ডেটা দুটি ভিন্ন স্টেটে সংরক্ষণ করবেন না।
যদি আপনার কাছে কাজের একটি তালিকা (list of tasks) এবং একটি নির্বাচিত কাজ (selected task) থাকে, তবে উভয় স্থানে পুরো টাস্ক অবজেক্টটি সংরক্ষণ করবেন না। এটি আপডেট করা কঠিন করে তোলে।
এর পরিবর্তে:
- কাজের তালিকাটি সংরক্ষণ করুন।
- শুধুমাত্র selectedTaskId সংরক্ষণ করুন।
- রেন্ডারিংয়ের সময় সেই ID ব্যবহার করে তালিকা থেকে টাস্কটি খুঁজে নিন।
এটি নিশ্চিত করে যে আপনার নির্বাচিত কাজটি সর্বদা তালিকার সর্বশেষ ডেটার সাথে মিল থাকে।
উৎস: https://dev.to/kkr0423/reactjs-usestate-antipatterns-58i9