🧩
Padrões

Compound Components

Componentes que cooperam via Context. <Tabs><Tab/><Panel/></Tabs> em vez de props gigantes.

Definição

Compound Components é um padrão onde múltiplos componentes trabalham juntos, compartilhando state implícito via Context. Em vez de uma API monolítica com muitas props, você compõe pequenos componentes que 'sabem' do pai.

🔴 Problema

APIs com muitas props (config: { tabs: [...], activeTab: 0, onChange: ... }) ficam rígidas e difíceis de customizar. Cada novo caso requer nova prop.

✅ Solução

Pai cria Context. Filhos consomem. API se torna composicional: <Tabs><TabList><Tab/></TabList><TabPanel/></Tabs>. Flexível, intuitivo, fácil de extender.

💡 Dica Senior

Padrão usado por Radix UI, Headless UI, shadcn/ui. Combina super bem com 'Server Component pattern' onde a composição é feita no parent server-side.

Perguntas de Entrevista

44/48