Context låter dig dela ett värde med ett helt underträd utan att skicka props genom alla nivåer (prop drilling). Du skapar en context, omsluter ett underträd i dess Provider, och alla efterkommande komponenter läser den med useContext.
= ();
() {
(
);
}
() {
theme = ();
;
}
Lågfrekvent, "globalt-ish" data som många komponenter behöver: theme, current user, locale, feature flags.
När Provider:s value ändras, omrenderas varje komponent som konsumerar contexten — det finns inget sätt att prenumerera på bara en del av den. Två praktiska konsekvenser:
// ❌ 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}>
För ofta föränderlig eller stor state, dela context i mindre bitar, eller använd en store (Zustand/Redux) som stöder selektiva prenumerationer. Context är ett dependency-injection-verktyg, inte en fullständig state manager.