React Prop Drilling

What is Prop Drilling in React?

Prop drilling is passing a value down through components that do not use it themselves, purely to reach a deeper descendant. It is not an error, but past two or three levels it makes refactoring painful.

Prop Drilling example

// Drilling: Layout and Sidebar do not use user at all
<App user={user}>
  <Layout user={user}>
    <Sidebar user={user}>
      <Avatar user={user} />

// Fix 1 — composition: pass the element, not the data
<Layout sidebar={<Sidebar><Avatar user={user} /></Sidebar>} />

// Fix 2 — context for genuinely global values
const { user } = useAuth();   // read anywhere below the provider

Key points to remember

• Two levels of drilling is normal and clearer than context.
• Try composition before reaching for context — it solves many cases with no new concepts.
• Context suits values that rarely change: user, theme, locale.

Common mistakes with Prop Drilling

• Introducing a global store to avoid passing a prop one level.
• Putting frequently changing values in context and re-rendering large subtrees.