Context antaa sinulle mahdollisuuden jakaa arvon koko alipuun kanssa ilman props:ien välittämistä jokaisen tason läpi (prop drilling). Luot kontekstin, käärit alipuun sen Provider:iin, ja mikä tahansa jälkeläinen lukee sen useContext:lla.
= ();
() {
(
);
}
() {
theme = ();
;
}
Matalan taajuuden, "globaalinen-ish" data, jota monet komponentit tarvitsevat: theme, current user, locale, feature flags.
Kun Provider:in value muuttuu, jokainen kontekstia kuluttava komponentti uudelleen-renderöidään — ei ole mitään keinoa tilata vain osaa siitä. Kaksi käytännön seurausta:
// ❌ 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}>
Usein muuttuville tai suurille state:ille, jaa konteksti pienempiin osiin tai käytä storea (Zustand/Redux), joka tukee valikoivia tilauksia. Context on dependency-injection-työkalu, ei täydellinen state manager.