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:

Criando a base do componente Modal

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

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

Resultado

Componentes de Menu:

, repositório destinado a agrupar artigos criados por desenvolvedores no universo do react. Vale a pena conferir =).