React Context: When to Use It (and When Not To)

30‑second interview answer

React Context lets you pass data through the component tree without manually threading props at every level (avoids prop drilling). It’s great for app-wide data like theme, auth, locale. But Context is not a state management silver bullet—updates can re-render many consumers, so you should keep context values stable and split contexts when needed.

What problem does Context solve?

Prop drilling example:

<App user={user}>
  <Layout user={user}>
    <Header user={user}>
      <Avatar user={user} />

Context lets Avatar access user without passing it through every layer.

How Context works (simple)

1. Create context

const ThemeContext = React.createContext('light');

2. Provide value

<ThemeContext.Provider value={theme}>
  <App />
</ThemeContext.Provider>

3. Consume

const theme = React.useContext(ThemeContext);

Performance reality: context updates re-render consumers

When provider value changes, React re-renders components that read that context.

Common trap: unstable object values

Bad:

<Ctx.Provider value={{ user, logout }}>

That object is new every render → consumers re-render more often.

Fix with memoization:

const value = useMemo(() => ({ user, logout }), [user, logout]);
return <Ctx.Provider value={value}>{children}</Ctx.Provider>;

Or split contexts:

• UserContext
• AuthActionsContext

When NOT to use Context

Avoid Context for:

• high-frequency changing values (like typing text) if many consumers exist
• huge global stores where every change triggers many renders

Alternatives:

• lift state only where needed
• component composition (children props)
• external stores (Zustand, Redux, Jotai) when app complexity grows

Composition as a great alternative

Sometimes the simplest solution is:

function Layout({ header }) {
  return <div>{header}<main>...</main></div>;
}
 
<Layout header={<Header user={user} />} />

No Context needed.

Mini Q&A

Q1: What does Context solve?

• Prop drilling.

Q2: What is a common Context performance pitfall?

• Passing unstable objects/functions as provider value.

Q3: How to fix Context re-render churn?

• Memoize value; split contexts; reduce consumer count.

Summary checklist

• I can implement provider + consumer.
• I know when to use Context.
• I understand performance pitfalls.
• I can propose alternatives.