Context ஒரு முழு subtree உடன் ஒரு மதிப்பை பகிர்ந்து கொள்ள உங்களை அனுமதிக்கிறது ஒவ்வொரு நிலையிலும் props ஐ கடந்து செல்லாமல் (prop drilling). நீங்கள் ஒரு context ஐ உருவாக்குகிறீர்கள், அதன் Provider இல் ஒரு subtree ஐ சுற்றுகிறீர்கள், மற்றும் useContext உடன் எந்த descendant ஐ வாசிக்கிறீர்கள்.
= ();
() {
(
);
}
() {
theme = ();
;
}
குறைந்த-ফ்রீக்வென்சி, "global-ish" தரவு பல components ஐ தேவை: theme, current user, locale, feature flags.
Provider's value மாறும்போது, ஒவ்வொரு component context ஐ consume செய்யும் re-renders செய்கிறது — இதன் ஒரு பகுதிக்கு மட்டுமே subscribe செய்ய வேண்டிய வழி இல்லை. இரண்டு நடைமுறை விளைவுகள்:
// ❌ 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 ஐ சிறிய pieces க்கு பிரிக்கவும், அல்லது selective subscriptions ஐ support செய்யும் store (Zustand/Redux) ஐ பயன்படுத்தவும். Context ஒரு dependency-injection tool, முழு state manager அல்ல.