Context lets you share a value with a whole subtree without passing props through every level (prop drilling). You create a context, wrap a subtree in its Provider, and any descendant reads it with useContext.
= ();
() {
(
);
}
() {
theme = ();
;
}
Low-frequency, "global-ish" data many components need: theme, current user, locale, feature flags.
When the Provider's value changes, every component that consumes the context re-renders — there's no way to subscribe to just part of it. Two practical consequences:
// ❌ 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 frequently changing or large state, split context into smaller pieces, or use a store (Zustand/Redux) that supports selective subscriptions. Context is a dependency-injection tool, not a full state manager.