What is the Context API in React and when would you use it?

Q: What is the Context API in React and when would you use it?

**Target Audience:** Engineers preparing for React interviews — assumes props and state. **Difficulty:** Medium > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . The default-value and re-render behaviour below were measured on React 19.2.8. This doc covers *what Context is and when to use it*; why it re-renders every consumer covers the mechanism and the fixes in depth. ## 1. Why This Even Matters — A Story First A building has a public address system. Anyone on any floor can hear an announcement without it being carried from desk to desk. That is genuinely useful for "the building closes at six" — everyone needs it, and it is said once an hour at most. It is a terrible way to tell one person their coffee is ready. Every floor stops what it is doing, every time. Context is the PA system. What belongs on it is decided al

The problem

Question presented to candidate: "What is the Context API, and how do you decide whether a value belongs in it?"

What a strong answer should cover:

createContext makes a context; a provider supplies a value; any descendant reads it with useContext.
It solves prop drilling — delivering a value without threading it through intermediate components.
It is a transport mechanism, not a state manager. It does not store or update anything; the state still lives in a component or a store, and Context merely carries it.
The cost: every consumer re-renders when the provider value changes, and memo does not stop that.
So it suits values that are read widely and change rarely: theme, locale, current user, feature flags, a stable dispatch.
It suits badly: anything changing frequently, like form input or cursor position.
The default value is only used when a consumer has no provider above it — useful for tests and for catching missing providers.
Convention: wrap the useContext call in a custom hook that throws when the provider is missing.
Multiple small contexts beat one large object, because the granularity of re-rendering follows the granularity of the contexts.

Clarifying questions expected:

"How often does this value change, and how many components read it?"
"Have we tried composition first?" — often it removes the need entirely.

Code / implementation expected: Yes — a provider, a custom consumer hook with a missing-provider guard, and a memoised value.

state management
context api
props
global state

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 React interviews — assumes props and state. Difficulty: Medium

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. The default-value and re-render behaviour below were measured on React 19.2.8. This doc covers what Context is and when to use it; why it re-renders every consumer covers the mechanism and the fixes in depth.

1. Why This Even Matters — A Story First

A building has a public address system. Anyone on any floor can hear an announcement without it being carried from desk to desk. That is genuinely useful for "the building closes at six" — everyone needs it, and it is said once an hour at most.

It is a terrible way to tell one person their coffee is ready. Every floor stops what it is doing, every time.

Context is the PA system. What belongs on it is decided alm

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.

ReactA provider with a memoised value, and a guarded consumer hook

Open in playground

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

// null as the default so a missing provider is detectable rather than silently
// giving every consumer a plausible-looking fallback.
const ThemeContext = createContext(null);

// The custom hook keeps the context object private and turns "rendered outside
// the provider" into a clear error instead of a confusing undefined.
function useTheme() {
  const ctx = useContext(ThemeContext);
  if (ctx === null) throw new Error("useTheme must be used inside a ThemeProvider");
  return ctx;
}

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");
  const toggle = useCallback(() => setTheme((t) => (t === "light" ? "dark" : "light")), []);

  // Without useMemo this object is new on every render, so every consumer
  // re-renders even when the theme has not changed.
  const value = useMemo(() => ({ theme, toggle }), [theme, toggle]);

  return <ThemeContext value={value}>{children}</ThemeContext>;
}

let panelRenders = 0;
const ThemedPanel = memo(function ThemedPanel() {
  panelRenders++;
  const { theme, toggle } = useTheme();
  return (
    <div style={{
      padding: 12, borderRadius: 8,
      background: theme === "dark" ? "#222" : "#f4f4f4",
      color: theme === "dark" ? "#eee" : "#222",
    }}>
      <p style={{ margin: "0 0 8px" }}>
        theme: <strong>{theme}</strong> · panel renders: <strong>{panelRenders}</strong>
      </p>
      <button onClick={toggle}>toggle theme</button>
    </div>
  );
});

// Deliberately rendered OUTSIDE the provider to show the guard firing.
function Unguarded() {
  try {
    useTheme();
    return <p>read the theme</p>;
  } catch (e) {
    return <p style={{ color: "crimson", fontSize: 13 }}>caught: {e.message}</p>;
  }
}

export default function App() {
  const [tick, setTick] = useState(0);

  return (
    <div style={{ padding: 24, fontFamily: "system-ui", lineHeight: 1.6, maxWidth: 420 }}>
      <ThemeProvider>
        <ThemedPanel />
      </ThemeProvider>

      <p style={{ marginTop: 12 }}>
        <button onClick={() => setTick((t) => t + 1)}>
          re-render the app ({tick})
        </button>
      </p>

      <Unguarded />

      <p style={{ color: "#666", fontSize: 13 }}>
        Press the app re-render button: the panel counter stays put, because the
        memoised value keeps the same identity. Toggle the theme and it moves.
        The last line shows the custom hook catching a missing provider.
      </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.