Prop Drilling — When It's Fine, and When Context Actually Helps

The plain-language idea

Prop drilling is passing a value down through components that don't use it themselves, purely so a component further down can. It has a bad reputation, but drilling itself isn't a bug — it's just what one-way data flow looks like when the consumer is a few levels deep. The real skill is telling the difference between drilling that's fine and drilling that's actually costing you something.

See it in a real thing: two versions of the same drill

function Page({ user }) {
  return <Header user={user} />;
}
function Header({ user }) {
  return <Nav user={user} />;
}
function Nav({ user }) {
  return <Avatar user={user} />; // finally used, three layers down
}

Three components pass user along without touching it. That's mildly annoying to read, but it's also completely explicit — anyone tracing where user comes from can follow the props, one arrow at a time, and never has to guess. That traceability is a real feature, not just something drilling happens to have.

Now widen the tree: user needs to reach a dozen components scattered six and seven levels deep, in unrelated branches — a theme toggle in a footer, a permissions check in a modal, an avatar in three different places. Adding or renaming that prop now means touching every intermediate component on every path, and most of those components have nothing to do with user at all; they're just corridors. That's the version worth fixing, and the fix is Context — covered in the Context lesson, which goes into how a Provider makes a value directly readable by any descendant, and what that costs in re-renders.

What people usually miss

Watch out

• Explicit drilling is genuinely easier to debug than a hidden dependency. A prop drilled through three components shows up in three signatures you can search for. A value read via Context can be consumed anywhere, with no trace in the component's own props — great for reach, worse for "where does this actually come from."
• The threshold isn't a fixed number of levels — it's how many unrelated branches need the value. A prop drilled straight down one path, even five levels, is still just one path to trace. The real pain shows up when several separate branches all need it and each one repeats the same drilling.
• Context isn't the only fix. Component composition — passing an already-built element as a prop or as children, instead of drilling the raw data down and letting each layer build its own JSX — often removes the drilling entirely without introducing Context's re-render behavior at all.
• Reaching for Context by default has its own cost. Every value change re-renders every consumer, an issue this track's Context lesson covers in depth — so replacing every drilled prop with Context isn't automatically the upgrade it looks like.

The genealogy: the problem Context exists to solve

Prop drilling is the plain default of one-way data flow — a value moving down through props, one component at a time. Context is a targeted escape hatch for exactly one shape of pain drilling causes: many distant descendants needing the same value. This lesson is about recognizing when you're actually in that shape versus just passing a prop down a short, explicit path; the Context lesson is about what you get, and give up, once you decide you are.