Context lar deg dele en verdi med et helt undertre uten å sende props gjennom hvert nivå (prop drilling). Du opprettet en context, omslutter et undertre i dens Provider, og alle etterkommer leser den med useContext.
= ();
() {
(
);
}
() {
theme = ();
;
}
Lav-frekvente, "globale-ish" data som mange komponenter trenger: theme, gjeldende bruker, locale, feature flags.
Når Providerens value endres, alle komponenter som bruker contexten gjengir seg på nytt — det er ingen måte å abonnere på bare en del av den. To praktiske 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}>
For hyppig skiftende eller stor state, splitt context i mindre deler, eller bruk en store (Zustand/Redux) som støtter selektive abonnement. Context er et dependency-injection verktøy, ikke en fullstendig state manager.