Implementando Composition Pattern em aplicações React
Criar e manter uma aplicação React em grande escala é sempre um desafio, por isso existe patterns que nos ajudam a organizar melhor a estrutura do nosso app e tornar ele mais fácil dar manutenção. E hoje vou te mostrar um pattern que gosto muito de utilizar nas minhas aplicações, o Composition Pattern.
O que é o Composition Pattern?
O padrão de composição, ou “Composition Pattern”, é uma abordagem de design de software que se concentra na criação de estruturas complexas a partir de partes mais simples. Em vez de depender fortemente da herança de classes, o padrão de composição enfatiza a composição de objetos para obter flexibilidade e reutilização de código.
Os principais conceitos do padrão de composição são:
1. Composição sobre herança:
- Enquanto a herança envolve criar classes base e derivadas, a composição enfatiza construir objetos compostos de outros objetos.
- Evita problemas associados à hierarquia de herança profunda, como a complexidade crescente e acoplamento forte.
2. Objetos compostos:
- Em vez de herdar comportamentos, um objeto composto contém instâncias de outros objetos que possuem comportamentos específicos.
- Cada objeto é especializado em uma tarefa específica, promovendo a reutilização de código.
3. Flexibilidade e modificabilidade:
- A composição oferece mais flexibilidade do que a herança, por permitir que você adicione, remova ou substitua comportamentos de forma dinâmica durante o tempo de execução.
- Alterações em um componente não afetam diretamente outros componentes.
Onde isso se aplica no React?
O composition patter é uma ótima escolha no mundo do React, proporcionando uma abordagem robusta para construir interfaces de usuário escaláveis e de fácil manutenção. Essa prática se destaca em diversas áreas cruciais no desenvolvimento com React:
1. Reutilização de componentes: A essência do composition brilha na reutilização de componentes. Ao criar blocos de construção modulares, você pode facilmente combiná-los para formar interfaces mais complexas. Cada componente mantém sua singularidade, promovendo a reutilização eficiente do código.
2. Construção de hierarquias complexas: A construção de hierarquias de componentes é uma tarefa comum no React, e o composition pattern torna esse processo intuitivo. Componentes simples podem ser combinados para formar estruturas mais complexas, refletindo fielmente a organização lógica da interface do usuário.
3. Renderização condicional e dinâmica: O composition é ótimo ao lidar com renderização condicional. Componentes podem ser compostos de maneira dinâmica, adaptando-se a diferentes estados e cenários. Isso resulta em interfaces dinâmicas e responsivas.
4. Evitar Prop Drilling: Esse pattern é uma abordagem eficaz para contornar o “prop drilling”, onde as propriedades são passadas através de vários níveis de componentes. Ao compor componentes estrategicamente, você evita a necessidade de passar propriedades desnecessariamente, mantendo seu código mais limpo e legível.
Aplicando o pattern na prática
Neste exemplo, criemos um componente chamado Notification que pode ser montado de algumas formas diferentes, e para manter o nosso código mais limpo e organizado, utilizaremos o composition pattern, no final teremos esse resultado:
Vou pular a parte de como criar um projeto, caso você não saiba como iniciar um projeto em React, vou deixar a documentação nesse link.
Agora com o projeto iniciado, vamos criar uma pasta chamada components dentro de src e depois uma pasta chamada Notification, que ficará nosso código de exemplo:
Na pasta Notification criaremos algumas outras pastas:
Agora os códigos em cada pasta, não se preocupe com estilos, isso não importa agora! No final do post tem o link do repositório no GitHub onde você pode pegar todos os estilos.
Vou criar os arquivos: ActionButton.tsx ActionsButton.tsx Content.tsx Icon.tsx Root.tsx e um arquivo para exportar tudo isso que vai ser o index.ts na raiz da pasta Notification :
Pronto, com todos os arquivos criados e exportados conseguimos montar o componente Notification em nossas telas da forma que quisermos, com ou sem ActionsButton, com ou sem Icon, tudo isso sem precisar ficar fazendo condicionais dentro do nosso código baseado em props.
Vamos utilizar o componente no App.tsx :
Viu só como fica muito melhor e escalável o nosso código?!
Só curiosidade, veja como ficaria nosso componente caso não estivéssemos utilizando o Composition Pattern:
Bem ruim né?! Essa abordagem apresenta problemas como aumento de complexidade. Se essa abordagem for usada várias vezes, ela quebra a escalabilidade e pode ser considerada um “antipadrão”.
E é dessa forma que organizo meus componentes!
Ah e eu criei um repositório no GitHub com o código utilizado nesse post, se você quiser dar uma olhada mais a fundo é só clicar nesse link:
Bom, é isso, espero que tenha gostado! E se tiver alguma sugestão deixe aí nos comentários 💬
Se gostou, dê 1 ou 50 claps (Só clicar 50x na 👏)
Obrigado pela leitura!
Me acompanhe por aí! 😜
- Portfólio: vinniciusgomes.com
- GitHub: @vinniciusgomes
- LinkedIn: @vinniciusgomes
