Component Composition

Component composition builds reusable UI by combining smaller components and passing elements, data, or behavior through props. It favors flexible relationships between components instead of putting every variation into one large component.

Composition means creating a component from other components rather than making one component responsible for every possible variation. In React, this commonly involves passing JSX through props such as `children` or through named props.

The `children` prop is useful when a component provides structure while the parent decides what content appears inside it. Named component props are useful when there are several distinct insertion points, such as `header`, `footer`, or `actions`.

Composition also lets behavior remain configurable. A parent can pass data, callbacks, or complete elements into a child, allowing the child to provide layout and interaction mechanics without knowing every concrete use case.

This approach can reduce duplicated markup and avoid components with many boolean props such as `showHeader`, `showFooter`, and `showActions`. The goal is not to eliminate all conditional logic, but to give component boundaries clear responsibilities and make variation explicit.

Key points

• Combine small components to build larger UI components.
• Use `children` when callers control the nested content.
• Use named element props for multiple composition slots.
• Pass callbacks and data through props to customize behavior.
• Prefer composition when a component would otherwise accumulate many variation flags.

Interview questions

What is component composition in React?

Component composition means building a component by combining other components or by accepting content through props. A common example is using `children` so a container controls layout while its caller supplies the content. This keeps components focused and reusable. It also makes different UI variations possible without creating a separate component for every case.

Why might composition be preferable to many boolean props?

A component with many boolean props can accumulate combinations that are difficult to reason about and test. Composition lets the caller explicitly provide the pieces that should appear, often producing a clearer API. For example, instead of `showHeader` and `showActions`, a component can accept `header` and `actions` elements. This separates the reusable layout from decisions about which pieces are present.

What is the difference between `children` and a named composition prop?

`children` represents content nested between a component's opening and closing tags. A named composition prop is useful when a component needs several semantically different insertion points. For example, a dialog might accept `title`, `actions`, and `children` separately. The choice should make the component's intended API easy for callers to understand.

How can composition help make a frontend component reusable?

A reusable component should generally own the behavior and structure that are common across its use cases while allowing variable content or behavior to be supplied by props. Composition provides that variation without requiring the component to know every concrete use case. For example, a reusable modal can control focus, layout, and closing behavior while callers provide its body and actions. This creates a stable component boundary with flexible contents.

How does component composition relate to prop drilling?

Composition determines how components are assembled, while prop drilling is a consequence of passing data through components that do not otherwise need it. Composition can improve boundaries, but it does not automatically eliminate prop drilling. If deeply nested components need the same state, alternatives such as lifting state, context, or a state-management solution may be appropriate. The right choice depends on ownership, dependency scope, and how frequently the data changes.