How does composition help avoid the problem known as prop drilling?

Prop drilling happens when you pass a prop through many components that do not actually need it, just so it can reach a component deep inside the tree. Composition can avoid this by passing the deeply needed component itself as children, so it sits closer to where the data actually lives, skipping the middle layers entirely.

// Instead of drilling a theme prop through three levels
function Page({ theme }) {
  return (
    <Sidebar>
      <Profile theme={theme} /> {/* passed directly as children, skipping Sidebar */}
    </Sidebar>
  );
}

function Sidebar({ children }) {
  return <aside>{children}</aside>;
}