What is Props Drilling?

Props drilling means passing data through many layers of components just to reach a deeply nested child. The middle components do not use the data; they only forward it.

App (user) → Layout (user) → Sidebar (user) → Profile (user)   ← only Profile needs user

function Profile({ user }) {
  return <p>👤 {user.name}</p>;
}
function Sidebar({ user }) {
  return <aside><Profile user={user} /></aside>;       // just forwarding
}
function Layout({ user }) {
  return <div><Sidebar user={user} /></div>;           // just forwarding
}

export default function App() {
  const user = { name: 'Asha' };
  return <Layout user={user} />;
}

• Many components change when the data shape changes.
• Hard to read: where does this prop come from?
• Middle components re-render when the prop changes even though they do not use it.