Context stelt u in staat om een waarde te delen met een hele subtree zonder props door elk niveau heen te hoeven doorgeven (prop drilling). U maakt een context, verpakt een subtree in zijn Provider, en elke descendant leest het met useContext.
= ();
() {
(
);
}
() {
theme = ();
;
}
Laagfrequente, "globale-achtige" gegevens die veel componenten nodig hebben: thema, huidige gebruiker, landinstellingen, functievlaggen.
Wanneer de value van de Provider verandert, elk component dat de context gebruikt, wordt opnieuw gerenderd — er is geen manier om zich alleen op een deel ervan in te schrijven. Twee praktische gevolgen:
// ❌ 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}>
Voor veelvuldig veranderende of grote state, splits context in kleinere stukken, of gebruik een store (Zustand/Redux) die selectieve abonnementen ondersteunt. Context is een dependency-injection-tool, geen volledige state manager.