コンポジションとChildrenパターン

A component that tries to support every layout through dozens of props becomes a tangled mess. Composition solves this: let consumers pass content in, rather than describing it with flags.

This lesson teaches composition patterns that keep components small and flexible.

Consider a Card with showHeader, headerText, showIcon, iconName, showFooter... it never ends.

Each new use case adds a prop. The component grows unmaintainable. Composition lets the consumer supply the pieces instead.

The simplest composition tool is passing children. The component renders a wrapper and drops whatever you give it inside.

The snippet below illustrates the concept in plain functions.

When a component has distinct regions - header, body, footer - use named slots rather than one children blob.

The consumer fills each slot independently. This keeps structure consistent while letting content vary freely.

A powerful pattern is exposing sub-components: Card, Card.Header, Card.Body.

Consumers assemble them like building blocks. The parent manages shared styling while children stay flexible. This reads naturally and avoids prop overload.

Composition is not always right. For tightly controlled elements - a date input, a rating widget - props give you guardrails.

Use props for behavior and constrained options; use composition for layout and content. Knowing when to use each is the real skill.

Sometimes a component manages state but lets the consumer decide how to render it. Passing a function as children gives the consumer that data.

This inverts control: the component owns logic, the consumer owns presentation. It is ideal for things like toggles or data fetchers.

Across your library, decide consistent conventions: which components accept children, which use slots, which use render props.

If similar components behave differently, consumers must relearn each one. Consistency makes composition predictable.

Composable components are inherently more reusable. A flexible Card serves a product card, a settings panel, and an alert without modification.

You write less code, ship fewer variants, and reduce the surface area for bugs.

Too much composition shifts complexity onto the consumer. If everyone must wire ten sub-components to render a button, you have failed them.

Provide sensible defaults and convenience wrappers for common cases while keeping the composable parts available for advanced needs.

The best component libraries feel like a box of well-fitting blocks. Composition is the mindset that gets you there: small, focused pieces that combine endlessly.

Reach for composition before adding the next prop.

You learned composition techniques for reusable UI:

• Prefer composition over an explosion of props.
• Use children, named slots, and compound components.
• Use configuration for constrained behavior, composition for layout.
• Provide defaults to avoid over-composition.

Composable components are the foundation of a flexible library.