The State Structure

স্টেট ডিজাইন করতে গেলে কিছু প্রিন্সিপাল মেনে চললে কাজটা অনেক সহজ হয়ে যায়। রিয়াক্টে স্টেট নিয়ে যখন কাজ করো, তখন এই প্রিন্সিপালগুলো মনে রাখলে তুমি অনেক সুন্দর ও ইফিশিয়েন্ট উপায়ে স্টেট ম্যানেজ করতে পারবে। তো চল, এবার ধীরে ধীরে দেখে নিই কীভাবে এই প্রিন্সিপালগুলো আমাদের স্টেট ডিজাইনকে আরও সুন্দর করে তুলবে!

1. Group Related State (পারস্পারিক সম্পর্কযুক্ত স্টেটগুলো একত্রে গ্রুপ করা)

তুমি যদি দেখো যে তোমার একাধিক স্টেট আছে যেগুলো একে অপরের সাথে সম্পর্কিত এবং একসাথে পরিবর্তন হতে পারে, তবে এই স্টেটগুলোকে আলাদা করে রাখার চেয়ে একটি গ্রুপে রাখা উচিত। এতে তুমি আরও সহজে ম্যানেজ করতে পারবে।

যেমন ধরো, তুমি একটা কার্সরের পজিশন ট্র্যাক করছো যেখানে x এবং y দুইটা আলাদা স্টেট হিসেবে রাখা হয়েছে:

const [x, setX] = useState(0);
const [y, setY] = useState(0);

এখন মাউস মুভ হলে তোমাকে x এবং y দুইটা স্টেটই আপডেট করতে হবে। কিন্তু তুমি চাইলে এভাবে দুইটা আলাদা স্টেট না নিয়ে, একটি অবজেক্টের মাধ্যমে একসাথে গ্রুপ করে নিতে পারো:

const [position, setPosition] = useState({ x: 0, y: 0 });

এভাবে একই সাথে x এবং y ম্যানেজ করা অনেক সহজ হবে।

2. Avoid Contradictions in State (কনট্রাডিক্টরি স্টেট পরিহার করা)

তুমি হয়তো এমন কোনো সিনারিও পাবে যেখানে দুইটা স্টেটের মধ্যে কনট্রাডিকশন হতে পারে, অর্থাৎ দুটো স্টেট একই সাথে সত্য (true) বা মিথ্যা (false) হতে পারেনা। এরকম ক্ষেত্রে দুইটা স্টেট নেওয়ার চেয়ে একটি স্টেট নিয়েই কাজ করা ভালো।

ধরো একটা লাইটের কথা চিন্তা করো, লাইটের দুইটা স্টেট হতে পারে: ১। লাইট অন (isOn) ২। লাইট অফ (isOff)

এখন তুমি কি কখনো এমনভাবে লাইটকে একসাথে অন আর অফ করতে পারবে? না, পারবে না, কারণ এটা কনট্রাডিক্টরি। তুমি চাইলে দুইটা স্টেট না নিয়ে শুধু একটাই স্টেট দিয়ে এই কাজটা করে নিতে পারো:

const [lightStatus, setLightStatus] = useState("on");

এখানে lightStatus দিয়ে তুমি লাইটের দুইটা অবস্থাকেই ম্যানেজ করতে পারবে।

3. Avoid Redundant State (অপ্রয়োজনীয় স্টেট বাদ দেয়া)

তুমি যদি কোনো স্টেটকে অন্য স্টেট থেকে ক্যালকুলেট করতে পারো, তবে আলাদা করে সেই স্টেট রাখা জরুরি না। এটা হলো Derived State। অর্থাৎ তুমি যখন এক স্টেট থেকে আরেকটা স্টেট তৈরি করে ব্যবহার করতে পারো, তখন নতুন স্টেট না নিয়ে ক্যালকুলেট করে কাজটা করে ফেললেই ভালো।

যেমন ধরো তুমি firstName, lastName, আর fullName তিনটা স্টেট নিচ্ছো:

const [firstName, setFirstName] = useState("Shahadat");
const [lastName, setLastName] = useState("Hussain");
const [fullName, setFullName] = useState("Shahadat Hussain");

এখানে fullName স্টেট নেয়ার কোনো দরকার নেই, কারণ তুমি চাইলেই firstName আর lastName থেকে fullName তৈরি করে নিতে পারো:

const fullName = firstName + " " + lastName;

তাহলে তুমি বুঝতেই পারছো, fullName স্টেট এখানে অপ্রয়োজনীয়। আমরা এরকম Redundant স্টেট বাদ দিয়ে ক্যালকুলেট করা ডেটা দিয়ে কাজ করতে পারি।

4. Avoid Duplication in State (ডুপ্লিকেট স্টেট বাদ দেয়া)

একই ভ্যালু যদি তুমি আলাদা আলাদা স্টেটে রেখে কাজ করো, সেটা Duplication in State হিসেবে গণ্য হবে। এরকম স্টেট রাখা ঠিক না, বরং যেখানে সম্ভব সেখানে Derived State ব্যবহার করে একই ভ্যালু থেকে কাজ করতে পারো।

ধরো, তোমার একটা অ্যাপ আছে যেখানে তুমি isLoggedIn আর userStatus নামে দুইটা স্টেট ব্যবহার করছো। তুমি যদি ভাবো, isLoggedIn স্টেট userStatus থেকেও ডেরাইভ করা সম্ভব, তাহলে আলাদা করে isLoggedIn রাখার দরকার নেই।

const isLoggedIn = userStatus === "logged_in";

5. Avoid Deeply Nested State (ডিপলি নেস্টেড স্টেট পরিহার করা)

যদি তোমার স্টেটের ভেতরে অনেকগুলো লেভেলের নেস্টেড অবজেক্ট থাকে, তাহলে সেই স্টেট ম্যানেজ করা বেশ কঠিন হয়ে যাবে। এটা করলে স্টেট আপডেটের সময় কোডের কমপ্লেক্সিটি বাড়বে, ভুল হতে পারে, আর কোডটাও সহজে পড়া যাবেনা।

তুমি চাইলে তোমার ডেটা normalize বা flatten করতে পারো। অর্থাৎ নেস্টেড অবজেক্টগুলোকে সরল করা উচিত যাতে স্টেট আপডেট করা সহজ হয়।

// অনেক লেভেলের নেস্টেড অবজেক্ট বাদ দিয়ে
const [user, setUser] = useState({
  id: 1,
  name: "Shahadat",
  preferences: { theme: "dark" },
});
 
// ফ্ল্যাটেন করে
const [user, setUser] = useState({
  id: 1,
  name: "Shahadat",
  theme: "dark",
});

এভাবে কাজ করলে তুমি ডাটা ম্যানেজ করতে সহজে পারবে এবং ভুল হবার সম্ভাবনাও কমে যাবে।

শেষ কথা: তুমি যখনই রিয়াক্টে স্টেট ডিজাইন করবে, এই প্রিন্সিপালগুলো মনে রাখলে তোমার অ্যাপ আরো সহজে ম্যানেজ করা যাবে, স্টেট আপডেট হবে সঠিকভাবে, আর কোডও পরিষ্কার এবং রিডেবল থাকবে।