Component Composition

Composition means building big UI from small pieces, the way you nest HTML tags.

React prefers this over class inheritance.

children as a hole in the layout

Slots with named props

When you have two holes, give them names.

Containment vs specialization

Do not make WelcomeDialog extend Dialog with inheritance.

Make Dialog wrap children, then:

Keep props boring

A component that takes 12 flags is trying to be every variant.

Split it. Compose the variants from smaller parts.

Tip: If you are about to write a boolean prop like isHeader, you might want two components instead.