Prop Drilling: When It Hurts & When It's Fine
Identify deep drilling chains and distinguish noise from genuine complexity.
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} />;
}All lessons in this course
- Lifting State Up: Principles & Examples
- Prop Drilling: When It Hurts & When It's Fine
- Sibling Communication Patterns
- Choosing the Right State Location