Why do all context consumers re-render when the context value changes?

Context is a subscription mechanism. Each consumer subscribes to the nearest provider for that context. When the provider receives a new value that is not Object.is equal to the previous one, React marks all subscribers as needing an update. The update comes from context itself, so memoizing the consumer's props does not prevent it.

function App() {
  const [user, setUser] = useState({ name: "Asha" });

  const value = { user, setUser };

  return (
    <UserContext value={value}>
      <Header />
      <Profile />
    </UserContext>
  );
}

Ways to reduce context churn

• Split state and actions into separate contexts
• Memoize the provider value when its parts are stable
• Keep the provider as close as possible to its consumers
• Pass stable children through a memoized provider component
• Use an external store with selectors when consumers need fine-grained subscriptions

const UserContext = createContext(null);
const UserActionsContext = createContext(null);

function UserProvider({ children }) {
  const [user, setUser] = useState(null);
  const actions = useMemo(() => ({ setUser }), []);

  return (
    <UserContext value={user}>
      <UserActionsContext value={actions}>
        {children}
      </UserActionsContext>
    </UserContext>
  );
}

React 19 also allows use(Context) inside conditionals, but that changes where a context can be read, not how subscriptions behave. The value identity rule still applies.