useContext

Core Hook

What if a field agent could receive classified intel without a single courier?

🕵️ Theme: Spy Network

Your app is a spy network. Prop drilling is like passing classified documents through a chain of couriers — every intermediary handles the secret. useContext is an encrypted radio channel: HQ (Provider) broadcasts intel, and any field agent (consumer) tunes in directly. No couriers, no leaks, no middlemen.

The Courier Chain

Prop drilling is like passing classified documents through a chain of couriers — every intermediary sees the secret, and each one is a liability.

COMPROMISEDCourier chain — 5 layers deep

HQHas the classified secret

┊ passes secret ↓

Regional OfficeJust passes the folder along

┊ passes secret ↓

Field StationJust passes the folder along

┊ passes secret ↓

Safe HouseJust passes the folder along

┊ passes secret ↓

Agent ShadowActually needs the secret

The Encrypted Channel

useContext creates an encrypted channel — HQ broadcasts directly to the field agent. No intermediaries, no leaks.

ENCRYPTEDDirect intel — no intermediaries

HQ + ProviderBROADCASTS

Regional Officeno clearance needed

Field Stationno clearance needed

Safe Houseno clearance needed

Agent ShadowuseContext(IntelCtx)

HQ broadcasts → Agent decodes. No couriers, no leaks.

encrypted-channel.tsx

const IntelCtx = createContext(null);

function HQ() {
  const [secret] = useState("Rendezvous at dawn");
  return (
    <IntelCtx.Provider value={secret}>
      <RegionalOffice />  {/* no props! */}
    </IntelCtx.Provider>
  );
}

// Middle layers — clean, no secret prop
function RegionalOffice() { return <FieldStation />; }
function FieldStation() { return <SafeHouse />; }
function SafeHouse() { return <AgentShadow />; }

// Agent decodes the intel directly
function AgentShadow() {
  const secret = useContext(IntelCtx);
  return <span>Mission: {secret}</span>;
}

The Spy Playbook

Establish the Channel

createContext(defaultValue)

Set up the secure frequency — a shared encrypted line for intel.

Broadcast from HQ

<IntelCtx.Provider value={data}>

HQ sends the classified data — wrap the network that needs access.

Decode in the Field

useContext(IntelCtx)

Any field agent tunes in — read the intel anywhere inside the network.

Field Operations

Every spy needs field practice. Try these operations — each one uses context to share intel across the network.

🏠Safe House ModeProvider Pattern

Relay Station — no mode prop

Safe House — Bravo

COVERT

All clear — operating under the radar

reads mode from context — no props

safe-house-mode.tsx

const ModeCtx = createContext({ mode: "covert", toggle: () => {} });

function HQ() {
  const [mode, setMode] = useState("covert");
  return (
    <ModeCtx.Provider value={{ mode, toggle: () => setMode(m => m === "covert" ? "compromised" : "covert") }}>
      <RelayStation />  {/* no mode prop! */}
    </ModeCtx.Provider>
  );
}

function RelayStation() { return <SafeHouse />; }

function SafeHouse() {
  const { mode } = useContext(ModeCtx);
  return <div className={mode}>Status: {mode}</div>;
}

📋Agent DossierShared State

Codename

Clearance Level

Avatar

ID Badge

🕵️

Shadow

Field Agent

Classified

Comms Panel

Incoming for: Shadow

Field Agent

Mission Card

🕵️

Shadow

Field Agent

All 3 panels read from AgentContext

agent-dossier.tsx

const AgentCtx = createContext({ codename: "", clearance: "", avatar: "" });

function HQ() {
  const [agent, setAgent] = useState({ codename: "Shadow", clearance: "Field Agent", avatar: "🕵️" });
  return (
    <AgentCtx.Provider value={agent}>
      <IDBadge />       {/* reads codename + avatar */}
      <CommsPanel />    {/* reads codename + clearance */}
      <MissionCard />   {/* reads all fields */}
    </AgentCtx.Provider>
  );
}

function IDBadge() {
  const { codename, avatar } = useContext(AgentCtx);
  return <div>{avatar} {codename}</div>;
}

📡Code Languagei18n Pattern

Alpha-Bravo, this is HQ

Proceed to extraction point Delta

HQ out — stay frostynato

code-language.tsx

const CipherCtx = createContext({ cipher: "nato", t: translations.nato });

function HQ() {
  const [cipher, setCipher] = useState("nato");
  return (
    <CipherCtx.Provider value={{ cipher, t: translations[cipher] }}>
      <BriefingBanner />  {/* reads greeting + briefing */}
      <ConfirmButton />   {/* reads confirm text */}
      <SignoffFooter />   {/* reads signoff + cipher name */}
    </CipherCtx.Provider>
  );
}

function BriefingBanner() {
  const { t } = useContext(CipherCtx);
  return <div>{t.greeting} — {t.briefing}</div>;
}

These are the patterns that trip up developers most often. Switch between Wrong and Fixed to compare the code side by side.

Unmemoized provider value

Passing a new object literal as the context value on every render

Don't do this

spy-provider.tsx

function SpyNetworkProvider({ children }) {
  const [agents, setAgents] = useState([]);

  // New object on every render — ALL consumers re-render
  return (
    <SpyContext.Provider value={{ agents, setAgents }}>
      {children}
    </SpyContext.Provider>
  );
}

Context uses reference equality to detect changes. If you pass a new object literal as the value, every consumer re-renders on every provider re-render — even if the data inside hasn't changed. Wrap the value in useMemo so the reference only changes when the actual data changes.

One giant context for everything

Putting all app state in a single context provider

Don't do this

app-context.tsx

// Every consumer re-renders when ANY field changes
const AppContext = createContext(null);

function AppProvider({ children }) {
  const [user, setUser] = useState(null);
  const [theme, setTheme] = useState("dark");
  const [notifications, setNotifications] = useState([]);

  return (
    <AppContext.Provider value={{
      user, setUser, theme, setTheme, notifications, setNotifications
    }}>
      {children}
    </AppContext.Provider>
  );
}

When everything lives in one context, a change to any field triggers a re-render in every consumer — even components that only need the theme will re-render when notifications update. Split your context into focused providers so consumers only subscribe to the data they actually use.

Using context without a provider

Consuming a context that has no provider above it in the tree

Don't do this

agent.tsx

const SpyContext = createContext(undefined);

function AgentCard() {
  // No SpyProvider above this component — gets undefined
  const ctx = useContext(SpyContext);
  return <div>{ctx.agentName}</div>; // TypeError!
}

// Rendered without wrapping in a provider
function App() {
  return <AgentCard />;
}

If no provider exists above the consumer in the component tree, useContext returns the default value passed to createContext (often undefined or null). This usually leads to a silent bug or a runtime crash. Create a custom hook that throws a descriptive error when the provider is missing.

The Courier Chain

Prop drilling is like passing classified documents through a chain of couriers — every intermediary sees the secret, and each one is a liability.

COMPROMISEDCourier chain — 5 layers deep

HQHas the classified secret

┊ passes secret ↓

Regional OfficeJust passes the folder along

┊ passes secret ↓

Field StationJust passes the folder along

┊ passes secret ↓

Safe HouseJust passes the folder along

┊ passes secret ↓

Agent ShadowActually needs the secret

The Encrypted Channel

useContext creates an encrypted channel — HQ broadcasts directly to the field agent. No intermediaries, no leaks.

ENCRYPTEDDirect intel — no intermediaries

HQ + ProviderBROADCASTS

Regional Officeno clearance needed

Field Stationno clearance needed

Safe Houseno clearance needed

Agent ShadowuseContext(IntelCtx)

HQ broadcasts → Agent decodes. No couriers, no leaks.

encrypted-channel.tsx

const IntelCtx = createContext(null);

function HQ() {
  const [secret] = useState("Rendezvous at dawn");
  return (
    <IntelCtx.Provider value={secret}>
      <RegionalOffice />  {/* no props! */}
    </IntelCtx.Provider>
  );
}

// Middle layers — clean, no secret prop
function RegionalOffice() { return <FieldStation />; }
function FieldStation() { return <SafeHouse />; }
function SafeHouse() { return <AgentShadow />; }

// Agent decodes the intel directly
function AgentShadow() {
  const secret = useContext(IntelCtx);
  return <span>Mission: {secret}</span>;
}

The Spy Playbook

Establish the Channel

createContext(defaultValue)

Set up the secure frequency — a shared encrypted line for intel.

Broadcast from HQ

<IntelCtx.Provider value={data}>

HQ sends the classified data — wrap the network that needs access.

Decode in the Field

useContext(IntelCtx)

Any field agent tunes in — read the intel anywhere inside the network.

const ModeCtx = createContext({ mode: "covert", toggle: () => {} }); function HQ() { const [mode, setMode] = useState("covert"); return ( <ModeCtx.Provider value={{ mode, toggle: () => setMode(m => m === "covert" ? "compromised" : "covert") }}> <RelayStation /> {/* no mode prop! */} </ModeCtx.Provider> ); } function RelayStation() { return <SafeHouse />; } function SafeHouse() { const { mode } = useContext(ModeCtx); return <div className={mode}>Status: {mode}</div>; }

function SpyNetworkProvider({ children }) { const [agents, setAgents] = useState([]); // New object on every render — ALL consumers re-render return ( <SpyContext.Provider value={{ agents, setAgents }}> {children} </SpyContext.Provider> ); }

// Every consumer re-renders when ANY field changes const AppContext = createContext(null); function AppProvider({ children }) { const [user, setUser] = useState(null); const [theme, setTheme] = useState("dark"); const [notifications, setNotifications] = useState([]); return ( <AppContext.Provider value={{ user, setUser, theme, setTheme, notifications, setNotifications }}> {children} </AppContext.Provider> ); }

const SpyContext = createContext(undefined); function AgentCard() { // No SpyProvider above this component — gets undefined const ctx = useContext(SpyContext); return <div>{ctx.agentName}</div>; // TypeError! } // Rendered without wrapping in a provider function App() { return <AgentCard />; }

useContext

The Courier Chain

The Encrypted Channel

The Spy Playbook

Establish the Channel

Broadcast from HQ

Decode in the Field

Field Operations

Common Mistakes

useContext

The Courier Chain

The Encrypted Channel

The Spy Playbook

Establish the Channel

Broadcast from HQ

Decode in the Field

Field Operations

Common Mistakes