Context আপনাকে একটি সম্পূর্ণ সাবট্রি জুড়ে একটি মান শেয়ার করতে দেয় প্রতিটি স্তরের মাধ্যমে props পাস না করে (prop drilling)। আপনি একটি context তৈরি করেন, একটি সাবট্রি তার Provider এ মোড়ান, এবং যেকোনো বংশধর useContext দিয়ে এটি পড়ে।
= ();
() {
(
);
}
() {
theme = ();
;
}
নিম্ন-ফ্রিকোয়েন্সি, "গ্লোবাল-সদৃশ" ডেটা যা অনেক কম্পোনেন্ট প্রয়োজন: theme, current user, locale, feature flags।
যখন Provider এর value পরিবর্তিত হয়, প্রতিটি কম্পোনেন্ট যা context ব্যবহার করে পুনঃ-রেন্ডার হয় — এটির শুধুমাত্র একটি অংশের জন্য সাবস্ক্রাইব করার কোনো উপায় নেই। দুটি ব্যবহারিক পরিণতি:
// ❌ a NEW object every render → all consumers re-render every time
<Ctx.Provider value={{ user, setUser }}>
// ✅ memoize the value so it only changes when it really changes
const value = useMemo(() => ({ user, setUser }), [user]);
<Ctx.Provider value={value}>
ঘন ঘন পরিবর্তনশীল বা বড় state এর জন্য, context কে ছোট টুকরায় বিভক্ত করুন, অথবা একটি store (Zustand/Redux) ব্যবহার করুন যা নির্বাচনী সাবস্ক্রিপশন সমর্থন করে। Context একটি dependency-injection টুল, সম্পূর্ণ state manager নয়।