0Pricing
React Academy · Lesson

Prop Drilling: When It Hurts & When It's Fine

Identify deep drilling chains and distinguish noise from genuine complexity.

Prop Drilling: When It Hurts & When It's Fine is a free React Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will learn to identify prop drilling, understand when it causes real problems, and distinguish it from situations where passing props is the correct and simple solution.

What Is Prop Drilling?

Prop drilling occurs when you pass a prop through intermediate components that do not use it themselves — only their children need it. Each middle layer must accept and forward the prop.
// Middle component: receives 'user' only to pass it down
function Layout({ user }) {
  return <Sidebar user={user} />;
}
// Sidebar: receives 'user' only to pass it down
function Sidebar({ user }) {
  return <UserAvatar user={user} />;
}
// UserAvatar: actually uses 'user'
function UserAvatar({ user }) {
  return <img src={user.avatarUrl} />;
}

When Drilling Is Fine

Drilling 1–2 levels is often perfectly fine and the simplest solution. The cost of adding Context or a state library is higher than the cost of an extra prop at shallow depths.

Signs Drilling Has Become a Problem

Drilling is a problem when: (1) props pass through 4+ levels of components that do not use them, (2) renaming a prop requires changes in many files, (3) it is hard to tell which component actually consumes the data.

Refactoring with Component Composition

Before reaching for Context, try **component composition**. Pass the fully rendered consumer component as a prop (or children) instead of raw data. The intermediate layer never needs to know about the data.
// Instead of drilling 'user' through Layout → Sidebar → UserAvatar,
// render UserAvatar at the top level and pass it as a slot:
function App() {
  return <Layout sidebar={<UserAvatar user={user} />} />;
}

Component Composition Reduces Coupling

Composition means the parent that owns the data also renders the consumer component directly. Intermediate layout components receive finished JSX, so they are completely decoupled from the data.

When to Use Context

Use Context when: (1) composition would require passing complex JSX through many layers, (2) many unrelated components across the tree need the same data (e.g. current user, theme, locale).

When to Use a State Library

Use Zustand, Redux, or similar when state is complex, frequently updated, needs devtools, or must be shared across completely separate component trees.

The Inverse Data Flow

Prop drilling also applies to callbacks. Passing an `onChange` handler five levels deep is as painful as data. Apply the same composition and Context strategies to callbacks.

Decision Flow

Ask: how many levels? 1–2: just drill. 3+: try composition first. Still messy: use Context. Complex update logic or cross-tree: use a state library.

Quick Check

Which solution should you try BEFORE reaching for Context to solve prop drilling?

Recap

Prop drilling 1–2 levels is fine. Beyond 3 levels, try component composition first. Use Context for many consumers of the same data. Use a state library for complex or cross-tree state.

Up Next

Next lesson: **Sibling Communication Patterns** — you will coordinate two sibling components through shared parent state and callback props.

Frequently asked questions

Is the “Prop Drilling: When It Hurts & When It's Fine” lesson free?

Yes — the full text of “Prop Drilling: When It Hurts & When It's Fine” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Prop Drilling: When It Hurts & When It's Fine”?

Identify deep drilling chains and distinguish noise from genuine complexity. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Prop Drilling: When It Hurts & When It's Fine” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Lifting State Up: Principles & Examples
  2. Prop Drilling: When It Hurts & When It's Fine
  3. Sibling Communication Patterns
  4. Choosing the Right State Location
← Back to React Academy