advanced

Compound components

Let related components share implicit context so consumers compose flexible APIs without passing every prop manually.

Compound components expose a flexible composition API—`Tabs`, `TabList`, `TabPanel`—linked through implicit context instead of exhaustive prop lists. Consumers arrange subcomponents while the parent enforces accessibility and state coordination. React Context or slot-like patterns implement this in frontend libraries.

On interviews: design a compound Select or Accordion API. Explain ergonomics versus configuration-object APIs.

Common pitfalls: breaking composition when internal context keys change; missing dev warnings for misuse; state split across siblings inconsistently.

The trade-off is flexibility versus complexity—know when the simpler path is enough.

Checklist:

Subcomponents validate parent context presence.
Public API documents required structure.
Accessibility IDs wired centrally.
Examples show canonical composition patterns.