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:

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

Criando a base do componente Modal

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

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

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

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

Utilizando

Resultado

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:

Componentes de Menu:

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 =).