Context কখন একটি ভালো স্টেট সমাধান এবং কখন নয়?

Question

Accepted Answer

React এর **Context API** আপনাকে একটি সম্পূর্ণ component subtree এর সাথে একটি মান ভাগ করতে দেয় prop drilling ছাড়াই। এটি **কম-ফ্রিকোয়েন্সি, ব্যাপকভাবে-ভাগ করা** ডেটার জন্য দুর্দান্ত — কিন্তু এটি *একটি* সম্পূর্ণ state-management সমাধান নয় এবং ঘন ঘন পরিবর্তনশীল স্টেটের জন্য একটি re-render সমস্যা রয়েছে। ## Context কখন উজ্জ্বল হয় ```jsx const ThemeContext = createContext("light"); function App() { const [theme, setTheme] = useState("light"); return ( {/* any descendant can read theme — no prop drilling */} ); } ``` ```text Good fits (data that's read widely but changes rarely): ✓ Theme (dark/light) ✓ Current user / auth ✓ Locale / i18n ✓ App-wide config or feature flags ``` ## সমস্যা: যেকোনো পরিবর্তনে প্রতিটি consumer re-render হয় ```jsx // ❌ a context value that changes often re-renders ALL consumers const AppContext = createContext(); // value = { user, cart, notifications, ...everything } // → updating ONE field re-renders EVERY component using the context ``` যখন context মান পরিবর্তিত হয়, **সকল** components যা সেই context ব্যবহার করে re-render হয় — তা নির্বিশেষে যে তারা পরিবর্তিত অংশ ব্যবহার করে কিনা। ঘন ঘন আপডেট হওয়া স্টেটের জন্য, এটি পারফরম্যান্স সমস্যা সৃষ্টি করে। Context এর কোনো বিল্ট-ইন selective subscription নেই। ## প্রশমন এবং বিকল্প ```text ✓ Split into multiple focused contexts (ThemeContext, UserContext separately) ✓ Memoize the value object (useMemo) so it doesn't change identity needlessly ✗ But for high-frequency or large shared state → use a real store ``` স্টেট লাইব্রেরি (Zustand, Redux, Jotai) **selective subscriptions** এর সাথে re-render সমস্যা সমাধান করে — components শুধুমাত্র যা ব্যবহার করে তার অংশে subscribe করে এবং যখন সেই অংশগুলি পরিবর্তিত হয় তখনই re-render হয়: ```js const count = useStore(s => s.count); // re-renders ONLY when count changes ``` ## Context একটি state manager নয় ```text Context = a TRANSPORT mechanism (passes a value down), NOT state management itself. You still need useState/useReducer to hold the state; Context just distributes it. ``` ## কেন এটি গুরুত্বপূর্ণ Context এর সুবিধা জানা — এবং এর সীমাবদ্ধতা — দুটি সাধারণ ভুল প্রতিরোধ করে: যা Context এ থাকা উচিত তা prop-drilling করা, এবং high-frequency state Context এ রাখা (app-wide re-renders এর কারণ)। নিয়ম: **রেয়ার-পরিবর্তনশীল, ব্যাপকভাবে-ভাগ করা** মানগুলির জন্য Context (theme, user, locale); **ঘন ঘন-পরিবর্তনশীল বা বড়** ভাগ করা state এর জন্য selective subscriptions সহ একটি dedicated store। যে Context state বিতরণ করে কিন্তু এটি পরিচালনা করে না এটি বোঝা স্পষ্ট করে যখন এটি যথেষ্ট এবং কখন আপনার আরও কিছু দরকার।