Context re-renders when unrelated value changes

WHAT THIS TESTS Whether you understand Context's all-or-nothing subscription model: a consumer re-renders whenever the Provider's value changes by reference, regardless of which part of that value it actually reads.

A GOOD ANSWER COVERS The root cause is that you packed both theme and user into one context value object. Toggling the theme creates a new value object, a new reference, so every component calling useContext on that context re-renders, including one that only reads user.name. Context does not do partial subscriptions by field. The cleanest fix is to split into separate contexts, a ThemeContext and a UserContext, each with its own Provider, so a name consumer subscribes only to UserContext and is untouched by theme changes. Additionally, memoize each Provider's value with useMemo so it does not get a new reference on every parent render for unrelated reasons. If you need fine-grained selection from a single large store, use a state library with selectors, such as Zustand or Redux with useSelector, which re-render only when the selected slice changes.

COMMON WRONG ANSWERS Wrapping the consumer in React.memo and expecting it to stop the re-render; memo compares props, but a context value change re-renders the consumer regardless. Believing useContext only triggers when the specific field used changes. Leaving everything in one context and just memoizing the consumer. Recreating the value object inline in the Provider every render, which causes re-renders even without state changes.

LIKELY FOLLOW-UPS Why does React.memo not prevent context-driven re-renders? How does useMemo on the Provider value help? When do you outgrow split contexts and need a selector-based store?

ONE CONCRETE EXAMPLE Originally one AppContext provided { theme, user }. A Greeting component reads only user.name yet re-renders on every theme toggle. You refactor into ThemeContext and UserContext with separate Providers, each value wrapped in useMemo. Now toggling the theme changes only ThemeContext's value, so Greeting, which consumes only UserContext, no longer re-renders, while themed components update as expected.