M

MLOG

Português

Um mergulho profundo na arquitetura de componentes React, comparando composição e herança. Descubra por que React favorece a composição e explore padrões como HOCs, Render Props e Hooks.

Arquitetura de Componentes React: Por Que a Composição Triumfa Sobre a Herança

No mundo do desenvolvimento de software, a arquitetura é fundamental. A forma como estruturamos nosso código determina sua escalabilidade, manutenibilidade e reutilização. Para desenvolvedores que trabalham com React, uma das decisões arquitetônicas mais fundamentais gira em torno de como compartilhar lógica e UI entre componentes. Isso nos leva a um debate clássico na programação orientada a objetos, reimaginado para o mundo baseado em componentes do React: Composição vs. Herança.

Se você vem de um background em linguagens clássicas orientadas a objetos como Java ou C++, a herança pode parecer uma primeira escolha natural. É um conceito poderoso para criar relacionamentos 'é um'. No entanto, a documentação oficial do React oferece uma recomendação clara e forte: "No Facebook, usamos React em milhares de componentes e não encontramos nenhum caso de uso onde recomendaríamos a criação de hierarquias de herança de componentes."

Este post fornecerá uma exploração abrangente dessa escolha arquitetônica. Vamos desempacotar o que herança e composição significam em um contexto React, demonstrar por que a composição é a abordagem idiomática e superior, e explorar os padrões poderosos – de Componentes de Ordem Superior a Hooks modernos – que tornam a composição o melhor amigo do desenvolvedor para construir aplicações robustas e flexíveis para um público global.

Entendendo a Velha Guarda: O Que é Herança?

Herança é um pilar central da Programação Orientada a Objetos (POO). Ela permite que uma nova classe (a subclasse ou filho) adquira as propriedades e métodos de uma classe existente (a superclasse ou pai). Isso cria um relacionamento de 'é um' firmemente acoplado. Por exemplo, um GoldenRetriever é um Dog, que é um Animal.

Herança em um Contexto Não-React

Vamos olhar um exemplo simples de classe JavaScript para solidificar o conceito:

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} faz um barulho.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // Chama o construtor pai
    this.breed = breed;
  }

  speak() { // Sobrescreve o método pai
    console.log(`${this.name} late.`);
  }

  fetch() {
    console.log(`${this.name} está buscando a bola!`);
  }
}

const myDog = new Dog('Buddy', 'Golden Retriever');
myDog.speak(); // Saída: "Buddy late."
myDog.fetch(); // Saída: "Buddy está buscando a bola!"

Neste modelo, a classe Dog adquire automaticamente a propriedade name e o método speak do Animal. Ela também pode adicionar seus próprios métodos (fetch) e sobrescrever os existentes. Isso cria uma hierarquia rígida.

Por Que a Herança Falha no React

Embora este modelo 'é um' funcione para algumas estruturas de dados, ele cria problemas significativos quando aplicado a componentes de UI no React:

Por causa desses problemas, a equipe do React projetou a biblioteca em torno de um paradigma mais flexível e poderoso: a composição.

Abraçando o Modo React: O Poder da Composição

Composição é um princípio de design que favorece um relacionamento 'tem um' ou 'usa um'. Em vez de um componente ser outro componente, ele tem outros componentes ou usa suas funcionalidades. Os componentes são tratados como blocos de construção – como peças de LEGO – que podem ser combinados de várias maneiras para criar UIs complexas sem serem presos a uma hierarquia rígida.

O modelo composicional do React é incrivelmente versátil e se manifesta em vários padrões chave. Vamos explorá-los, do mais básico ao mais moderno e poderoso.

Técnica 1: Contenção com `props.children`

A forma mais direta de composição é a contenção. É onde um componente atua como um contêiner genérico ou 'caixa', e seu conteúdo é passado de um componente pai. O React tem uma prop especial e integrada para isso: props.children.

Imagine que você precisa de um componente `Card` que possa envolver qualquer conteúdo com uma borda e sombra consistentes. Em vez de criar variantes `TextCard`, `ImageCard` e `ProfileCard` através de herança, você cria um único componente genérico `Card`.

// Card.js - Um componente contêiner genérico
function Card(props) {
  return (
    <div className="card">
      {props.children}
    </div>
  );
}

// App.js - Usando o componente Card
function App() {
  return (
    <div>
      <Card>
        <h1>Bem-vindo!</h1>
        <p>Este conteúdo está dentro de um componente Card.</p>
      </Card>

      <Card>
        <img src="/path/to/image.jpg" alt="Uma imagem de exemplo" />
        <p>Este é um cartão de imagem.</p>
      </Card>
    </div>
  );
}

Aqui, o componente Card não sabe nem se importa com o que ele contém. Ele simplesmente fornece a estilização do wrapper. O conteúdo entre as tags de abertura e fechamento <Card> é automaticamente passado como props.children. Este é um belo exemplo de desacoplamento e reutilização.

Técnica 2: Especialização com Props

Às vezes, um componente precisa de múltiplos 'buracos' a serem preenchidos por outros componentes. Embora você possa usar `props.children`, uma maneira mais explícita e estruturada é passar componentes como props regulares. Este padrão é frequentemente chamado de especialização.

Considere um componente `Modal`. Um modal geralmente tem uma seção de título, uma seção de conteúdo e uma seção de ações (com botões como "Confirmar" ou "Cancelar"). Podemos projetar nosso `Modal` para aceitar essas seções como props.

// Modal.js - Um contêiner mais especializado
function Modal(props) {
  return (
    <div className="modal-backdrop">
      <div className="modal-content">
        <div className="modal-header">{props.title}</div>
        <div className="modal-body">{props.body}</div>
        <div className="modal-footer">{props.actions}</div>
      </div>
    </div>
  );
}

// App.js - Usando o Modal com componentes específicos
function App() {
  const confirmationTitle = <h2>Confirmar Ação</h2>;
  const confirmationBody = <p>Você tem certeza que deseja prosseguir com esta ação?</p>;
  const confirmationActions = (
    <div>
      <button>Confirmar</button>
      <button>Cancelar</button>
    </div>
  );

  return (
    <Modal
      title={confirmationTitle}
      body={confirmationBody}
      actions={confirmationActions}
    />
  );
}

Neste exemplo, o `Modal` é um componente de layout altamente reutilizável. Nós o especializamos passando elementos JSX específicos para seu `title`, `body` e `actions`. Isso é muito mais flexível do que criar subclasses `ConfirmationModal` e `WarningModal`. Nós simplesmente compomos o `Modal` com conteúdo diferente conforme necessário.

Técnica 3: Componentes de Ordem Superior (HOCs)

Para compartilhar lógica não-UI, como busca de dados, autenticação ou logging, os desenvolvedores React historicamente recorreram a um padrão chamado Componentes de Ordem Superior (HOCs). Embora em grande parte substituídos por Hooks no React moderno, é crucial entendê-los, pois representam um passo evolutivo chave na história da composição do React e ainda existem em muitas bases de código.

Um HOC é uma função que recebe um componente como argumento e retorna um novo componente aprimorado.

Vamos criar um HOC chamado `withLogger` que registra as props de um componente sempre que ele é atualizado. Isso é útil para depuração.

// withLogger.js - O HOC
import React, { useEffect } from 'react';

function withLogger(WrappedComponent) {
  // Ele retorna um novo componente...
  return function EnhancedComponent(props) {
    useEffect(() => {
      console.log('Componente atualizado com novas props:', props);
    }, [props]);

    // ... que renderiza o componente original com as props originais.
    return <WrappedComponent {...props} />;
  };
}

// MyComponent.js - Um componente a ser aprimorado
function MyComponent({ name, age }) {
  return (
    <div>
      <h1>Olá, {name}!</h1>
      <p>Você tem {age} anos.</p>
    </div>
  );
}

// Exportando o componente aprimorado
export default withLogger(MyComponent);

A função `withLogger` envolve o `MyComponent`, dando-lhe novas capacidades de logging sem modificar o código interno do `MyComponent`. Poderíamos aplicar o mesmo HOC a qualquer outro componente para dar a ele o mesmo recurso de logging.

Desafios com HOCs:

Técnica 4: Render Props

O padrão Render Prop surgiu como uma solução para algumas das desvantagens dos HOCs. Ele oferece uma maneira mais explícita de compartilhar lógica.

Um componente com uma render prop recebe uma função como prop (geralmente chamada `render`) e chama essa função para determinar o que renderizar, passando qualquer estado ou lógica como argumentos para ela.

Vamos criar um componente `MouseTracker` que rastreia as coordenadas X e Y do mouse e as torna disponíveis para qualquer componente que queira usá-las.

// MouseTracker.js - Componente com render prop
import React, { useState, useEffect } from 'react';

function MouseTracker({ render }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (event) => {
    setPosition({ x: event.clientX, y: event.clientY });
  };

  useEffect(() => {
    window.addEventListener('mousemove', handleMouseMove);
    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
    };
  }, []);

  // Chama a função render com o estado
  return render(position);
}

// App.js - Usando o MouseTracker
function App() {
  return (
    <div>
      <h1>Mova seu mouse!</h1>
      <MouseTracker
        render={mousePosition => (
          <p>A posição atual do mouse é ({mousePosition.x}, {mousePosition.y})</p>
        )}
      />
    </div>
  );
}

Aqui, o `MouseTracker` encapsula toda a lógica para rastrear o movimento do mouse. Ele não renderiza nada por conta própria. Em vez disso, ele delega a lógica de renderização para sua prop `render`. Isso é mais explícito do que HOCs porque você pode ver exatamente de onde os dados `mousePosition` vêm diretamente no JSX.

A prop `children` também pode ser usada como uma função, que é uma variação comum e elegante desse padrão:

// Usando children como função
<MouseTracker>
  {mousePosition => (
    <p>A posição atual do mouse é ({mousePosition.x}, {mousePosition.y})</p>
  )}
</MouseTracker>

Técnica 5: Hooks (A Abordagem Moderna e Preferida)

Introduzidos no React 16.8, Hooks revolucionaram a forma como escrevemos componentes React. Eles permitem usar estado e outros recursos do React em componentes funcionais. Mais importante, Hooks personalizados fornecem a solução mais elegante e direta para compartilhar lógica com estado entre componentes.

Hooks resolvem os problemas de HOCs e Render Props de uma maneira muito mais limpa. Vamos refatorar nosso exemplo `MouseTracker` em um hook personalizado chamado `useMousePosition`.

// hooks/useMousePosition.js - Um Hook personalizado
import { useState, useEffect } from 'react';

export function useMousePosition() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const handleMouseMove = (event) => {
      setPosition({ x: event.clientX, y: event.clientY });
    };

    window.addEventListener('mousemove', handleMouseMove);
    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
    };
  }, []); // Array de dependência vazio significa que este efeito é executado apenas uma vez

  return position;
}

// DisplayMousePosition.js - Um componente usando o Hook
import { useMousePosition } from './hooks/useMousePosition';

function DisplayMousePosition() {
  const position = useMousePosition(); // Basta chamar o hook!

  return (
    <p>
      A posição do mouse é ({position.x}, {position.y})
    </p>
  );
}

// Outro componente, talvez um elemento interativo
import { useMousePosition } from './hooks/useMousePosition';

function InteractiveBox() {
  const { x, y } = useMousePosition();

  const style = {
    position: 'absolute',
    top: y - 25, // Centraliza a caixa no cursor
    left: x - 25,
    width: '50px',
    height: '50px',
    backgroundColor: 'lightblue',
  };

  return <div style={style} />;
}

Esta é uma melhoria massiva. Não há 'inferno de wrapper', nenhuma colisão de nomes de props, e nenhuma função complexa de render prop. A lógica é completamente desacoplada em uma função reutilizável (`useMousePosition`), e qualquer componente pode 'conectar-se' a essa lógica com estado com uma única linha de código clara. Hooks personalizados são a expressão máxima de composição no React moderno, permitindo que você construa sua própria biblioteca de blocos de lógica reutilizáveis.

Uma Comparação Rápida: Composição vs. Herança no React

Para resumir as principais diferenças em um contexto React, aqui está uma comparação direta:

Aspecto Herança (Anti-padrão no React) Composição (Preferida no React)
Relacionamento 'é um' relacionamento. Um componente especializado é uma versão de um componente base. 'tem um' ou 'usa um' relacionamento. Um componente complexo tem componentes menores ou usa lógica compartilhada.
Acoplamento Alto. Componentes filhos são firmemente acoplados à implementação de seu pai. Baixo. Componentes são independentes e podem ser reutilizados em diferentes contextos sem modificação.
Flexibilidade Baixa. Hierarquias rígidas baseadas em classes tornam difícil compartilhar lógica entre diferentes árvores de componentes. Alta. Lógica e UI podem ser combinadas e reutilizadas de inúmeras maneiras, como blocos de construção.
Reutilização de Código Limitada à hierarquia predefinida. Você obtém todo o "gorila" quando quer apenas a "banana". Excelente. Componentes e hooks pequenos e focados podem ser usados em toda a aplicação.
Idiomático do React Desencorajado pela equipe oficial do React. A abordagem recomendada e idiomática para construir aplicações React.

Conclusão: Pense em Composição

O debate entre composição e herança é um tópico fundamental no design de software. Embora a herança tenha seu lugar na POO clássica, a natureza dinâmica e baseada em componentes do desenvolvimento de UI a torna inadequada para o React. A biblioteca foi fundamentalmente projetada para abraçar a composição.

Ao favorecer a composição, você ganha:

Como um desenvolvedor React global, dominar a composição não é apenas seguir as melhores práticas – é entender a filosofia central que torna o React uma ferramenta tão poderosa e produtiva. Comece criando componentes pequenos e focados. Use `props.children` para contêineres genéricos e props para especialização. Para compartilhar lógica, recorra primeiro a Hooks personalizados. Pensando em composição, você estará a caminho de construir aplicações React elegantes, robustas e escaláveis que resistirão ao teste do tempo.