React Context বনাম Zustand: কোনটি কখন ব্যবহার করবেন
ডেভেলপাররা প্রায়শই React state-এর ক্ষেত্রে একটি ভুল করেন। তারা Context ভুলভাবে ব্যবহার করেন এবং তারপর পারফরম্যান্স সমস্যার জন্য Context-কে দোষারোপ করেন।
সমস্যাটি সাধারণত একটি বড় context object-এর কারণে হয়। যখন ওই object-এর কোনো একটি ভ্যালু পরিবর্তিত হয়, তখন সেই context ব্যবহার করা প্রতিটি component পুনরায় রেন্ডার (re-render) হয়। এমনকি একটি component যদি মাত্র একটি ছোট ডেটা প্রয়োজন বোধ করে, তবুও সেটি object-এর প্রতিটি পরিবর্তনের প্রতি প্রতিক্রিয়া দেখায়।
যদি আপনার notifications প্রতি ৩০ সেকেন্ড অন্তর আপডেট হয়, তবে আপনার Navbar পুনরায় রেন্ডার হবে—এমনকি Navbar যদি শুধুমাত্র user name-এর ওপর নির্ভর করে তবুও। এটি পারফরম্যান্স কমিয়ে দেয়।
আপনি কোনো লাইব্রেরি ছাড়াই এটি সমাধান করতে পারেন। আপনার context-গুলোকে পরিবর্তনের ফ্রিকোয়েন্সি অনুযায়ী আলাদা করুন।
একটি বড় context-এর পরিবর্তে কয়েকটি ব্যবহার করুন: • User data-র জন্য UserContext • Sidebar state-এর জন্য UIContext • Alerts-এর জন্য NotificationContext
এখন, আপনার Navbar শুধুমাত্র তখনই পুনরায় রেন্ডার হবে যখন user data পরিবর্তিত হবে। এই সহজ বিভাজনটি পারফরম্যান্স সংক্রান্ত বেশিরভাগ অভিযোগ সমাধান করে দেয়।
স্থিতিশীল (stable) ভ্যালুগুলোর জন্য React Context ব্যবহার করুন: • Themes • Auth status • Language settings
Context Server Components-এর সাথেও ভালো কাজ করে। Zustand শুধুমাত্র client side-এ কাজ করে।
যখন আপনার selective subscriptions প্রয়োজন হয়, তখন Zustand ব্যবহার করুন। Zustand component-গুলোকে state-এর নির্দিষ্ট অংশ বা slice-এ সাবস্ক্রাইব করার সুযোগ দেয়। যদি আপনার store-এর একটি অংশ পরিবর্তিত হয়, তবে শুধুমাত্র সেই নির্দিষ্ট অংশটি পর্যবেক্ষণ করা component-গুলোই পুনরায় রেন্ডার হবে।
নতুন state-এর ক্ষেত্রে এই লজিকটি অনুসরণ করুন:
React Context ব্যবহার করুন যদি: • ডেটা স্থিতিশীল হয় (theme, auth, locale)। • আপনার এটি SSR বা Server Components-এর সাথে কাজ করাতে হয়। • আপনি context আলাদা করার মাধ্যমে prop drilling বন্ধ করতে চান।
Zustand ব্যবহার করুন যদি: • ডেটা ঘন ঘন পরিবর্তিত হয়। • Component-গুলোর state-এর নির্দিষ্ট slice পর্যবেক্ষণ করার প্রয়োজন হয়। • আপনার লজিক জটিল হয়।
দাঁড়ান। API ডেটার জন্য এই দুটির কোনটিই ব্যবহার করবেন না। আপনি যদি সার্ভার থেকে ডেটা ফেচ (fetch) করেন, তবে TanStack Query ব্যবহার করুন। Context এবং Zustand ক্যাশিং (caching) বা ব্যাকগ্রাউন্ড রিফেচিং (background refetching) হ্যান্ডেল করে না।
সারসংক্ষেপ: • একটি বড় context object পুনরায় রেন্ডার হওয়ার কারণ হয়ে দাঁড়ায়। এটিকে আলাদা করুন। • স্থিতিশীল ভ্যালুর জন্য Zustand ব্যবহার করা অতিরিক্ত (overkill)। • ঘন ঘন পরিবর্তনের জন্য Context ব্যবহার করলে ল্যাগ (lag) তৈরি হয়। • সার্ভার স্টেট-এর জন্য Zustand ব্যবহার করা ভুল পদ্ধতি।