Why does updating Context re-render all its consumers, and how do you fix it?

Q: Why does updating Context re-render all its consumers, and how do you fix it?

**Target Audience:** Engineers preparing for senior React interviews — assumes Context and memo. **Difficulty:** Hard > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . Every render count below was measured on React 19.2.8 with memo -wrapped consumers, so an ordinary parent re-render was already blocked — anything that still rendered got through via context. ## 1. Why This Even Matters — A Story First A mailing list sends one newsletter covering sport, weather, and traffic. You subscribed for the traffic section. Every time the weather changes, the whole newsletter is reissued and lands in your inbox again — you open it, scan it, and find the traffic section unchanged. Nothing is broken. The list simply has no concept of "sections you care about". It knows who is subscribed, not what they read. React Context works exactly like that, and the fixes all amount to running more, smaller mailing lists

01

Understand the problem

Question presented to candidate: "A component reads only user from a context, but it re-renders every time the theme changes. It is wrapped in React.memo. Why, and how do you fix it?"

What a strong answer should cover:

React tracks which components read a context and marks all of them for re-render when the provider value changes. It does not know which part of the value each one read.
memo does not help — context propagation bypasses the props comparison entirely, because the value did not arrive through props.
The value is compared by reference with Object.is, so a fresh object literal as the provider value is always a change.
Fix 1: memoise the value. Removes re-renders caused by the provider merely re-rendering.
Fix 2: split the context by change frequency. The only fix for "I read one field and re-render for another".
Fix 3: separate state and dispatch contexts. dispatch never changes identity, so components that only dispatch never re-render.
Fix 4: pass children through. A provider taking children does not re-render the subtree it wraps.
Fix 5: a store with selectors — Redux, Zustand, Jotai, or useSyncExternalStore — when you genuinely need field-level subscriptions.
The framing: Context has no selector mechanism, and that is the whole problem.

Clarifying questions expected:

"Does the consumer read one field of a larger object, or the whole thing?"
"How often does the value actually change?"

Code / implementation expected: Yes — the split-context fix, ideally with visible render counts.

reactcontextperformance

02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

Target Audience: Engineers preparing for senior React interviews — assumes Context and memo. Difficulty: Hard

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. Every render count below was measured on React 19.2.8 with memo</code

Solution ready — 2 min read

Classified // press E to declassify

04

Explore the playground snippets

One context versus two, with live render counts

Run Playground

import { createContext, useContext, useState, useMemo, memo } from "react";

const counts = { joinedUser: 0, joinedTheme: 0, splitUser: 0, splitTheme: 0 };

// ── ONE CONTEXT: both values in a single object. ──────────────────────────
const JoinedCtx = createContext(null);

const JoinedUser = memo(function JoinedUser() {
  counts.joinedUser++;
  const { user } = useContext(JoinedCtx);
  return <Line label="reads user only" value={user} renders={counts.joinedUser} />;
});
const JoinedTheme = memo(function JoinedTheme() {
  counts.joinedTheme++;
  const { theme } = useContext(JoinedCtx);
  return <Line label="reads theme" value={theme} renders={counts.joinedTheme} />;
});

function JoinedProvider({ user, theme, children }) {
  const value = useMemo(() => ({ user, theme }), [user, theme]);
  return <JoinedCtx value={value}>{children}</JoinedCtx>;
}

// ── TWO CONTEXTS: split by what changes independently. ────────────────────
const UserCtx = createContext(null);
const ThemeCtx = createContext(null);

const SplitUser = memo(function SplitUser() {
  counts.splitUser++;
  return <Line label="reads user only" value={useContext(UserCtx)} renders={counts.splitUser} />;
});
const SplitTheme = memo(function SplitTheme() {
  counts.splitTheme++;
  return <Line label="reads theme" value={useContext(ThemeCtx)} renders={counts.splitTheme} />;
});

function SplitProvider({ user, theme, children }) {
  return (
    <UserCtx value={user}>
      <ThemeCtx value={theme}>{children}</ThemeCtx>
    </UserCtx>
  );
}

function Line({ label, value, renders }) {
  return (
    <p style={{ margin: "4px 0", fontSize: 14 }}>
      <code style={{ minWidth: 150, display: "inline-block" }}>{label}</code>
      {value} · renders: <strong>{renders}</strong>
    </p>
  );
}

function Panel({ title, children }) {
  return (
    <section style={{ border: "1px solid #ddd", borderRadius: 8, padding: 12, marginBottom: 12 }}>
      <h4 style={{ margin: "0 0 6px" }}>{title}</h4>
      {children}
    </section>
  );
}

export default function App() {
  const [user] = useState("ada");            // never changes
  const [theme, setTheme] = useState("dark");

  return (
    <div style={{ padding: 24, fontFamily: "system-ui", lineHeight: 1.6, maxWidth: 480 }}>
      <Panel title="One context — both consumers re-render">
        <JoinedProvider user={user} theme={theme}>
          <JoinedUser />
          <JoinedTheme />
        </JoinedProvider>
      </Panel>

      <Panel title="Two contexts — only the theme consumer re-renders">
        <SplitProvider user={user} theme={theme}>
          <SplitUser />
          <SplitTheme />
        </SplitProvider>
      </Panel>

      <button onClick={() => setTheme((t) => (t === "dark" ? "light" : "dark"))}>
        change the theme only
      </button>

      <p style={{ color: "#666", fontSize: 13 }}>
        Click a few times. In the first panel the user consumer climbs alongside
        the theme consumer, even though the user never changes and both are
        wrapped in memo. In the second panel it stays at 1.
      </p>
    </div>
  );
}

05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.