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

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.

react
context
performance

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

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-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

The solution is hidden so you can try first

6 min read · 9 sections

Try it in the playground

Open any example in the playground to run and change it.

ReactOne context versus two, with live render counts

Open in 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>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.