Notes

Search

SearchSearch

Padrão Compound Components

Feb 28, 2024, 3 min read

Padrão Compound Components

O padrão Compound Components é uma técnica poderosa em React que permite criar componentes que funcionam em conjunto de forma coesa, oferecendo uma API intuitiva e flexível para os desenvolvedores. Esse padrão é particularmente útil quando você deseja agrupar vários componentes relacionados em uma única unidade lógica, mantendo a flexibilidade e a composição.

O que são Compound Components?

Os Componentes Compostos (Compound Components) referem-se a um conjunto de componentes que trabalham juntos para atingir um objetivo comum. Cada componente individual é responsável por uma parte específica da funcionalidade, mas eles compartilham um estado ou contexto comum. Esses componentes podem ser aninhados dentro de um contêiner pai, formando uma unidade coesa.

Principais características

  1. Compartilhamento de estado ou contexto: Os componentes compostos compartilham um estado ou contexto, permitindo a comunicação eficiente entre eles.

  2. Encapsulamento de lógica relacionada: Cada componente composto lida com uma parte específica da lógica ou apresentação, promovendo um código mais modular e manutenível.

  3. API Intuitiva: O padrão busca oferecer uma API fácil de entender para os desenvolvedores, permitindo a configuração e personalização sem a necessidade de lidar diretamente com o estado interno dos componentes.

Exemplo prático

import React, { useState, useContext } from 'react';
 
// Contexto para gerenciar o estado do Toggle
const ToggleContext = React.createContext();
 
const Toggle = ({ children }) => {
  const [isToggled, setToggled] = useState(false);
 
  // Função para inverter o estado de ativação/desativação
  const toggle = () => setToggled((prev) => !prev);
 
  return (
    <ToggleContext.Provider value={{ isToggled, toggle }}>
      {children}
    </ToggleContext.Provider>
  );
};
 
const ToggleButton = () => {
  const { isToggled, toggle } = useContext(ToggleContext);
 
  return (
    <button onClick={toggle} style={{ backgroundColor: isToggled ? 'green' : 'red' }}>
      {isToggled ? 'Desativar' : 'Ativar'}
    </button>
  );
};
 
// Componente filho para o conteúdo associado ao estado do Toggle
const ToggleContent = ({ children }) => {
  const { isToggled } = useContext(ToggleContext);
 
  return isToggled ? children : null;
};
 
const App = () => (
  <Toggle>
    <ToggleButton />
    <ToggleContent>
      <p>Este conteúdo está visível quando o Toggle está ativado!</p>
    </ToggleContent>
  </Toggle>
);
 
export default App;

Neste exemplo, o componente Toggle é o componente pai que gerencia o estado de ativação/desativação. Os componentes ToggleButton e ToggleContent são os componentes filhos que compartilham o contexto do Toggle por meio do ToggleContext.Provider.

Ao clicar no botão gerenciado pelo ToggleButton, o estado de ativação/desativação é invertido, e o conteúdo associado ao estado é exibido ou oculto, dependendo do valor atual do estado.

Conclusão

Em resumo, o padrão Compound Components é uma abordagem valiosa para criar componentes em React que funcionam de maneira coesa, oferecendo uma experiência de desenvolvimento mais intuitiva e uma estrutura de código mais organizada.

Referências

Graph View

Backlinks