Context leidžia bendrinti reikšmę su visa žemiau esančia medžio dalimi nepraeidami props per visus lygius (prop drilling). Jūs sukuriat context, pasvyniojat žemiau esančią medžio dalį jos Provider naudodami, ir bet kuri palikuonė ją skaito naudodama useContext.
= ();
() {
(
);
}
() {
theme = ();
;
}
Retai pasikeitusių, "globalios" duomenys, kurių reikia daug komponentams: tema, dabartinis vartotojas, lokalė, funkcijų žymos.
Kai value Provider pasikeičia, kiekvienas komponentas, kuris vartoja context, iš naujo ataidi — nėra būdo prenumeruoti tik dalį. Du praktiniai padariniai:
// ❌ 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}>
Dėl dažnai keičiamų arba didelių būsenų, padalinkite context į mažesnes dalis arba naudokite saugyklą (Zustand/Redux), kuri palaiko atrankines prenumeratas. Context yra priklausomybės injekavimo įrankis, ne pilna būsenos vadybos sistema.