Context మీరు ఒక విలువను మొత్తం subtree తో భాగస్వామ్యం చేయడానికి అనుమతిస్తుంది ప్రతి స్థాయిలో props ను ఎటువంటి ఆధారం లేకుండా (prop drilling). మీరు context ను సృష్టించండి, దాని Provider లో subtree ను చుట్టండి, మరియు useContext తో ఏదైనా descendant ను చదవండి.
= ();
() {
(
);
}
() {
theme = ();
;
}
కమ్ territory-ఫ్రీక్వెన్సీ, "global-ish" డేటా చాలా components కు అవసరం: theme, current user, locale, feature flags.
Provider's value మారినప్పుడు, ప్రతి component context ను వినియోగించటానికి re-renders చేస్తుంది — దీని యొక్క ఒక భాగానికి మాత్రమే సభ్యత్వం చేసుకోవడానికి ఎటువంటి మార్గం లేదు. రెండు ఆచరణాత్మక పర్యవసానాలు:
// ❌ 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 ను చిన్న నిమిషాలుగా విభజించండి, లేదా selective subscriptions ని సపోర్ట్ చేసే store (Zustand/Redux) ఉపయోగించండి. Context ఒక dependency-injection tool, కాదు పూర్తి state manager.