Context તમને એક સમગ્ર subtree સાથે મૂલ્ય શેર કરવા દે છે દરેક સ્તર દ્વારા props પસાર કર્યા વિના (prop drilling). તમે એક context બનાવો, તેના Provider માં subtree ને લપેટો, અને કોઈપણ descendant તેને useContext સાથે વાંચે છે.
= ();
() {
(
);
}
() {
theme = ();
;
}
નીચો-આવૃત્તિ, "વૈશ્વિક-જેવો" ડેટા ઘણા ઘટકોને જરૂર છે: થીમ, વર્તમાન વપરાશકર્તા, સ્થાનિક, વિશેષતા ફ્લેગ્સ.
જ્યારે 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 નથી.