Context lader dig dele en værdi med et helt undertræ uden at skulle sende props gennem hvert niveau (prop drilling). Du opretter en context, omslutter et undertræ i dens Provider, og enhver efterkommer læser den med useContext.
= ();
() {
(
);
}
() {
theme = ();
;
}
Lav-frekvens, "global-ish" data som mange komponenter har brug for: theme, current user, locale, feature flags.
Når Provider-værdi ændres, vil hver komponent, der bruger konteksten, blive re-renderet — der er ingen måde at abonnere på kun en del af 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 ofte ændring eller stor state, opdel konteksten i mindre dele, eller brug et store (Zustand/Redux), som understøtter selektive abonnementer. Context er et dependency-injection-værktøj, ikke en fuld state manager.