DEV Community

Cover image for Dominando Compound Components: Construindo Componentes React Flexíveis e Reutilizáveis
Gabriel Duete
Gabriel Duete

Posted on

Dominando Compound Components: Construindo Componentes React Flexíveis e Reutilizáveis

Introdução

Algo que é muito útil e abrangente no mundo do React são os seus design patterns, pois eles ajudam a manter o código escalável e adicionam significado aos componentes que criamos.

Existem vários padrões, e neste artigo falaremos sobre Compound Components, um padrão avançado que é especialmente útil para criar interfaces flexíveis e compostas.

O Que é Compound Components?

O Compound Components é um padrão avançado em React. Tem como objetivo criar um design mais flexível, permitindo o compartilhamento de estado e lógica entre um grupo de componentes, onde a comunicação entre o componente pai e os componentes filhos devem ser feitas de maneira flexível.

Os componentes devem trabalhar juntos para realizarem algum comportamento sem criar árvores de props embaraçosas ou uma lógica complexa demais para ser refatorado ou compreendido futuramente.

Esse padrão nos ajuda a eliminar inflamações de props, onde temos que passar uma árvore de props entre os componentes. Essa injeção de props é um problema, pois pode causar vários re-renders desnecessários a cada estado que for atualizado, já que cada estado irá atualizar todos os componentes filho.

Temos um exemplo de Compound Components na estrutura do select e option das tags em HTML:

Image description

O select funciona como um gerenciador de estados da inferface, enquanto o option são configurados em como o select deve funcionar.

Exemplo utilizando Compound Components

Neste exemplo, vamos criar um Modal, que é dividida em dois componentes compostos: Toggle e Content. Onde vão compartilhar o estado de abrir e fechar o modal entre eles.

Vamos ver como seria criar esse componente passo a passo:

Podemos começar criando a context responsável por gerênciar o state de abrir e fechar o modal

Image description

Criando a base do componente Modal

Image description

Perceba que estamos usando children, para pegar os componentes que serão inseridos dentro do Modal, vamos querer usa-lo assim:

Image description

Agora precisamos criar o componente toggle, que vai ser responsável por abrir o Modal

Image description

Também precisamos do componente content que vai ser responsável por exibir o conteúdo do Modal

Image description

Por fim, podemos atribuir os dois ao nosso componente Modal e já ta no jeito (:

Image description

Utilizando

Image description

Resultado

Resultado visual do funcionamento do componente

Assim, a gente torna a criação e o uso de modais extremamente flexíveis e reutilizáveis. Modal.Toggle é responsável por ativar a exibição do modal, enquanto Modal.Content deve exibir o conteúdo do nosso modal.

Essa estrutura permite que os desenvolvedores personalizem facilmente o comportamento e o conteúdo dos modais de acordo com as necessidades específicas de suas aplicações, tornando o código mais limpo e organizado.

Outros exemplos

Também podemos utilizar Compound Components em outros contextos, por exemplo:

Componentes de Accordion:

Image description

Componentes de Menu:

Image description

Todos são flexivéis e adptavéis, facilitando o desenvolvimento, escalabilidade e uso do componente.

Exercício

Vimos que o botão de fechar ficou dentro do componente do conteúdo, seria interessante ter um componente para gerenciar o fechamento do modal, algo que poderíamos usar como <Modal.Close>Fechar</Modal.Close/>, vale a pena dar uma brincada e incluir esse componente também.

Conclusão

Vimos o quanto escrever componentes no padrão Compound Components pode ser útil em nossas aplicações, vimos também como utilizar e alguns exemplos em que esse padrão pode encaixar.

Fique à vontade para explorar e brincar criando componentes com Compoud Components, use com sabedoria e veja se realmente faz sentido aplicar no seu contexto, as vezes, se não for bem aplicado, ele pode mais atrapalhar doque ajudar.

OBS: Postei esse mesmo conteúdo no react4noobs, repositório destinado a agrupar artigos criados por desenvolvedores no universo do react. Vale a pena conferir =).

Top comments (2)

Collapse
 
rodrigorvsn profile image
Rodrigo Victor

Que cara bom

Collapse
 
gabrielduete profile image
Gabriel Duete

<3