𝗗𝗼𝗻’𝘁 𝗠𝗶𝘀𝘁𝗮𝗸𝗲 𝗗𝗮𝘁𝗮 𝗦𝗵𝗮𝗽𝗲 𝗳𝗼𝗿 𝗦𝘁𝗮𝘁𝗲 𝗦𝗵𝗮𝗽𝗲
আপনি যখন একটি React ফর্ম তৈরি করেন, তখন প্রায়শই সবকিছুকে একটি বড় স্টেট অবজেক্টের (state object) মধ্যে গ্রুপ করে ফেলেন।
আপনি আপনার UI-তে একটি অ্যাড্রেস (Address) সেকশন দেখতে পান। আপনি আপনার স্টেটে একটি অ্যাড্রেস অবজেক্ট তৈরি করেন। এটি দেখতে গোছানো এবং পরিচ্ছন্ন মনে হয়।
এটি একটি ফাঁদ।
সমস্যাটি React-এর নয়। সমস্যাটি হলো আপনার স্টেটের শেপ (shape)।
ফর্মগুলো কোনো স্ট্যাটিক ডেটা নয়। এগুলো হলো ইন্টারঅ্যাক্টিভ সিস্টেম। ব্যবহারকারীরা ফর্মের সেকশন অনুযায়ী আপডেট করেন না; তারা প্রতিটি ফিল্ড (field) অনুযায়ী আপডেট করেন।
কেন নেস্টেড স্টেট (nested state) আপনার প্রজেক্টের ক্ষতি করে:
- আপডেট করা ভারী হয়ে যায়। ইমিউটেবিলিটি (immutability) বজায় রাখতে একটি শহরের নাম পরিবর্তন করতে হলেও আপনাকে শহর, অ্যাড্রেস এবং টপ-লেভেল ফর্ম অবজেক্টটি পুনরায় তৈরি করতে হয়।
- জটিলতা বাড়তে থাকে। ফর্ম যত বড় হয়, আপনার ভ্যালিডেশন (validation) এবং রেন্ডারিং লজিক পরিচালনা করা তত কঠিন হয়ে পড়ে।
- রেন্ডার (re-render) বেড়ে যায়। একটি নেস্টেড ভ্যালু পরিবর্তন করলে নতুন অবজেক্ট রেফারেন্স তৈরি হয়। এটি আপনার পুরো কম্পোনেন্ট ট্রি-তে (component tree) অপ্রয়োজনীয় আপডেট ট্রিগার করতে পারে।
- মানসিক চাপ বাড়ে। আপনি ব্যবহারকারীর কথা ভাবা কমিয়ে অবজেক্ট পাথ (object paths) নিয়ে ভাবতে শুরু করেন।
ছোট ফর্মের ক্ষেত্রে সমস্যা কম হয়, কিন্তু প্রডাকশন ফর্মের ক্ষেত্রে নয়।
একটি প্রডাকশন ফর্মের জন্য ভ্যালিডেশন, অটোসেভ এবং কন্ডিশনাল লজিকের প্রয়োজন হয়। আপনি যদি এগুলো একটি গভীরভাবে নেস্টেড অবজেক্টের ওপর তৈরি করেন, তবে প্রতিটি নতুন ফিচার যোগ করা বেশ ব্যয়বহুল বা কঠিন মনে হবে।
সমাধান হলো ডেটা দেখতে কেমন তার বদলে ডেটা কীভাবে পরিবর্তিত হয়, তার ওপর ভিত্তি করে স্টেট ডিজাইন করা।
একটি ফ্ল্যাট (flatter) স্টেট শেপ এই সুবিধাগুলো প্রদান করে:
- দ্রুত আপডেট। একটি মাত্র ভ্যালু পরিবর্তন করতে আপনাকে খুব সামান্য কোড নিয়ে কাজ করতে হয়।
- সহজ ডিবাগিং। আপডেটগুলো লোকাল এবং প্রেডিক্টেবল (predictable) থাকে।
- উন্নত কম্পোনেন্ট বাউন্ডারি। আপনি বিশাল অবজেক্টের পরিবর্তে ডেটার ছোট ছোট অংশ পাস করতে পারেন।
অন্ধভাবে সবকিছু ফ্ল্যাট করবেন না। যদি ডেটা খুব কম পরিবর্তিত হয় এবং সবসময় একসাথে মুভ করে, তবে নেস্টিং ঠিক আছে। কিন্তু আপনার ফর্মের যে অংশগুলো প্রতিনিয়ত পরিবর্তিত হয়, সেগুলোকে নেস্ট করবেন না।
কোড করার আগে নিজেকে এই প্রশ্নগুলো করুন:
- কোন ফিল্ডগুলো সবচেয়ে বেশি পরিবর্তিত হয়?
- কোন সেকশনগুলোর স্বতন্ত্র ভ্যালিডেশন প্রয়োজন?
- কোন আপডেটগুলো বাকি UI থেকে আলাদা রাখা প্রয়োজন?
যদি একটি ফিল্ড আপডেট করা পরিবর্তনের চেয়েও কঠিন মনে হয়, তবে বুঝতে হবে আপনার স্টেট স্ট্রাকচারই সমস্যা।
আপনার UI-এর আদলে স্টেট মডেল করা বন্ধ করুন। ব্যবহারকারীর আচরণের (user's behavior) আদলে এটি মডেল করা শুরু করুন।