mediumFrontend

What is 'prop drilling' and how can it be avoided?

Q: What is 'prop drilling' and how can it be avoided?

**Core concept (TL;DR).** Prop drilling is passing data through **many intermediate components that don't use it**, just to reach a deeply nested child. It clutters components with props they only forward, and makes refactoring brittle. Fix it with **Context**, **component composition** ( children ), or a **state library**. Threading props through uninterested layers App (data) <rect x="30" y="96" width="90" height="3

552 views

Understand the problem

Identifies an anti-pattern and knowledge of solutions for state management.

prop drillingcontext apistate managementperformance

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Composition removes the drilling

import { useState } from "react";

// Layout doesn't know about 'user' — it just renders children
function Layout({ children }) {
  return <main style={{ padding: 16 }}>{children}</main>;
}
function Welcome({ user }) {
  return <h3>Welcome, {user}</h3>;
}

export default function App() {
  const [user] = useState("Ada");
  return (
    <div style={{ fontFamily: "system-ui" }}>
      {/* pass the consumer as children → no prop threaded through Layout */}
      <Layout>
        <Welcome user={user} />
      </Layout>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

When would you choose a class component over a functional component with hooks?

How do you interact with external APIs in React?