IntermediateIn-depth3 min readUpdated 2 Oct 2026

When should you use Context instead of prop drilling or a state management library?

SHORT ANSWER

Pass props when only a few levels need the data. Use Context for values many components read but that change rarely, such as theme, language or the logged-in user. Reach for a state library when shared state is large, updates often, or needs tools like selectors and devtools.

Explain it simply

Imagine a circular from the principal that every classroom needs. One way is to hand it to the HOD, who hands it to each class teacher, who hands it to the class representative. Most people in that chain just pass it along. That is prop drilling: passing a prop through components that do not use it, only to reach one deep down.

Another way is to put the circular on the notice board in the corridor. Anyone who needs it reads it directly. That is Context: a value made available to a whole subtree, and any component inside can read it.

For a busy exam cell that tracks thousands of seat allocations changing every minute, a notice board is not enough. You need a proper system where each person can follow only the part they care about. That is a state management library.

Example

jsx

const ThemeContext = createContext("light");

function App() {
  const [theme, setTheme] = useState("light");
  return (
    // React 19: the context itself can be used as the provider
    <ThemeContext value={theme}>
      <Dashboard />
      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
        Toggle theme
      </button>
    </ThemeContext>
  );
}

function Dashboard() {
  return <Sidebar />; // does not need to know about theme
}

function Sidebar() {
  const theme = useContext(ThemeContext); // reads it directly
  return <nav className={`sidebar ${theme}`}>Menu</nav>;
}

Dashboard no longer has to accept and forward a theme prop it never uses.

How it works

Props are explicit. You can see exactly where data comes from, which makes components easy to reuse and test. Passing through two or three levels is perfectly normal.
Context has a provider that supplies a value and consumers that read it with useContext (or use). When the provider's value changes, every component that reads that context re-renders, even if it uses only one part of the value. That is why Context fits data that changes rarely.
State libraries keep state in a store outside the component tree. Components subscribe to just the slice they need through selectors, so an update re-renders only the components whose slice changed. They often add devtools, middleware and patterns for complex updates. Server data, like API responses, is often better handled by a data-fetching library that caches requests.

Real-world use

Props: a ProductCard receiving product and onAddToCart from its parent list.
Context: theme, current language, logged-in user, feature flags.
State library: a shopping cart, filters and selections shared across many pages, a dashboard with frequent real-time updates.

Common mistakes

Using Context to avoid passing props even one level. Explicit props are clearer.
Putting all app state into one big Context, so any change re-renders the whole app.
Passing a new object as the value on every render, like value={{ user, setUser }}, which re-renders all consumers each time. Memoize the object or split it into separate contexts.
Adding a state library on day one for a small app that does not need it.
Thinking Context is a state manager by itself. It only passes a value down; the state still lives in useState or useReducer somewhere.

What to say in the interview

"I start with props, because they are explicit and a few levels of passing is fine. When many components at different depths need the same value and it changes rarely, like theme, locale or the current user, I use Context. The trade-off is that every consumer re-renders when the value changes. For large, frequently updated shared state, I'd use a state library that lets components subscribe to just the slice they need. And before any of that, I check whether component composition, like passing children, removes the drilling."

Follow-up questions

Why can Context cause performance problems, and how do you reduce them?
How does component composition (passing children) help with prop drilling?
Where would you keep data fetched from an API?

#context #state-management #prop-drilling #architecture