Avoiding prop drilling

Prop drilling is passing a prop through components that only forward it. Composition, with children or slots, removes most of it; context handles the few values that genuinely belong to the whole tree.

What a session covers

The tutor works through these with you, in conversation and code. A session ends when you have shown them, not when a video does.

Explain what prop drilling is and when it is actually a problem
Remove drilling with composition and children
Spot context used to avoid passing a prop two levels

In practice

A few lines that show Avoiding prop drilling doing its job.

TSX

// Before: Page -> Layout -> Sidebar -> UserMenu, all forwarding user.
// After: Page composes the pieces, and only UserMenu takes user.
function Page({ user }: { user: User }) {
  return (
    <Layout sidebar={<Sidebar menu={<UserMenu user={user} />} />}>
      <Feed />
    </Layout>
  );
}

The common mistake

Watch for

Reaching for context to avoid passing a prop two levels. Context hides the data flow and couples components to a provider; composition keeps it explicit and is usually enough.

What to know first

Your roadmap puts these before Avoiding prop drilling, unless you already know them.

useContext

How it stays learned

Once a session shows you understand Avoiding prop drilling, it comes back for review. Each review takes a minute and tells the memory model how well you still know it.

Day 3First recall, while it is fresh
Day 7Second, a week on
Day 18Last, when it has settled

Previous in the module← useReducer