Compound Components

React 🟡 Mid

Définition

Pattern ou un composant parent partage son état implicitement avec ses enfants via Context, offrant une API déclarative et flexible.

Analogie

Comme un menu déroulant HTML <select>/<option> : les options savent qu'elles font partie du select sans configuration explicite.

Exemple de code

// Utilisation declarative
<Tabs>
  <Tabs.List>
    <Tabs.Tab>Profil</Tabs.Tab>
    <Tabs.Tab>Settings</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panels>
    <Tabs.Panel>Contenu profil</Tabs.Panel>
    <Tabs.Panel>Contenu settings</Tabs.Panel>
  </Tabs.Panels>
</Tabs>

Cas d'usage

Composants UI complexes (tabs, accordéons, menus) nécessitant une API flexible et composable.

Anti-pattern

Utiliser ce pattern pour des composants simples ou une prop suffirait.

Termes liés

#patterns#interview#design

En entretien

Explique-moi le pattern Compound Components.
C'est un pattern où un composant parent partage son état implicitement avec ses enfants via Context, un peu comme un <select>/<option> HTML où les options savent qu'elles font partie du select sans configuration explicite. Ça donne une API déclarative et flexible, par exemple <Tabs><Tabs.List>...</Tabs.List></Tabs>.
Quand est-ce que tu éviterais ce pattern ?
Pour des composants simples où une simple prop suffirait, ça ajoute de la complexité inutile. Je le réserve aux composants UI complexes type tabs, accordéons ou menus qui ont besoin d'une API composable.

Fiche mise à jour le 2026-09-27