Component Composition

The plain-language idea

Instead of a component reaching deep into its children's configuration via a long list of props, you can hand it already-built React elements through children (or a named prop) and let it just render them wherever it wants:

function Panel({ children }) {
  return <div className="panel">{children}</div>;
}

function App() {
  return (
    <Panel>
      <UserProfile user={currentUser} />   {/* Panel never sees currentUser */}
    </Panel>
  );
}

Panel has no idea UserProfile or currentUser exist — App, which already has currentUser in scope, builds <UserProfile> directly and hands the finished element to Panel to place. Nothing had to be threaded through Panel's own props.

<Panel><UserProfile user={currentUser} /></Panel> — App builds UserProfile directly, with the data already in scope.

BackNext

Composition vs Context — two fixes for the same problem

Both composition and Context solve "a deeply nested descendant needs something an ancestor has, without every component in between caring about it" — but differently:

• Composition works when the parent that has the data can also build the element that needs it — no threading, because the data never has to pass through the components in between at all.
• Context works when the component using the data is built generically, far away, and can't be constructed by the data-holder directly (e.g., a deeply generic reusable Layout).

Watch out

• children isn't limited to one slot. You can accept multiple named "slot" props (<Layout header={...} sidebar={...} main={...} />) for components that need several independent regions.
• Composition often eliminates a re-render problem, not just a props problem. Panel re-rendering (say, from its own internal state) doesn't have to re-render UserProfile if UserProfile was passed in as children from App — the element reference passed down didn't change.
• This is exactly how libraries like React Router's <Outlet> and layout components work — a component in the middle of the tree that has no idea what's actually being rendered inside it.

Why this matters in interviews

"How would you avoid prop drilling without reaching for Context?" checks whether composition is actually in your toolkit — many candidates only know Context as the fix, when composition is often the simpler, more idiomatic one.