Component Composition
Por que importa
Compor componentes permite criar layouts complexos a partir de blocos menores, mantendo coesão visual e facilitando manutenção. O padrão garante que mudanças estruturais sejam aplicadas em um único ponto e repercutam em todo o sistema.
Forma canônica (sintaxe mínima)
Componente maior reutilizando um auxiliar
Por quê: mostra como um componente principal reaproveita outro componente passando dados específicos.
Padrões de uso
Seção com header e grid de cards
Quando usar: agrupar header, ações e coleção de cards em uma única unidade reaproveitável. Por quê: uma única mudança reflete em todas as telas que usam a seção composta.
Componentes auxiliares para slots complexos
Quando usar: encapsular estados vazios e reutilizá-los em diferentes módulos. Por quê: mantém linguagem consistente de empty state em todo o produto.
Componente composto dentro de list
Quando usar: separar responsabilidades entre componente de seção e componente de linha. Por quê: facilita evoluções isoladas de layout sem quebrar a lista principal.
Erros comuns (Do/Don’t)
❌ Errado — Cabeçalhos replicados
✅ Correto — Cabeçalho reutilizável
Por quê: centralizar estruturas idênticas reduz divergências e esforço de manutenção.
❌ Errado — Valor ignorado
✅ Correto — Props encadeados
Por quê: componentes intermediários precisam repassar os dados esperados pelos utilitários que encapsulam.
Referências cruzadas
Relacionados
Component Definition: base de cada bloco reutilizável.Component Props: gerenciamento de dados passados entre componentes.Component List: listas alimentadas por componentes compostos.Dashboard: guia que demonstra composições avançadas.
Composições recomendadas
- Component Composition + Grid → seções completas com vitrines reutilizáveis.
- Component Composition + Modal → reutiliza cabeçalhos e conteúdos em sobreposições.
- Component Composition + Drawer → painéis laterais complexos com subcomponentes.
Componente composto aplicado em drawer
Por quê: combina cabeçalho reutilizável e conteúdo customizado dentro do drawer.