Dumb e Smart Components

Introdução

React traz um conceito muito interessante que é a separação de componentes em Dumb e Smart Components. O entendimento desse conceito vai trazer muitas vantagens no desenvolvimento no dia-a-dia. Além de melhorar a lógica, separação de código, manutenção e testes vai separar a responsabilidade de cada componente.

Essa separação de código, muita das vezes atrelada a lógica de negócios traz muitos benefícios.

Exemplo

Agora que entendemos o que é cada um, vamos ver um exemplo de como podemos separar um componente em Dumb e Smart:

Dumb e Smart Components

import React, { useState } from "react";

// Dumb component
const Brick = ({ width, height, backgroundColor }) => {
  return <div style={{ width, height, backgroundColor }} />;
};

// Smart component
const Building = () => {
  const [width, setWidth] = useState(100);
  const [height, setHeight] = useState(100);
  const [backgroundColor, setBackgroundColor] = useState("red");
  const [walls, setWalls] = useState(0);

  return (
    <div>
      <button onClick={() => setWidth(width + 10)}>Aumentar largura</button>
      <button onClick={() => setHeight(height + 10)}>Aumentar altura</button>
      <button onClick={() => setBackgroundColor("blue")}>Mudar cor</button>
      <button onClick={() => setWalls(walls + 1)}>Construir parede</button>

      {walls > 0 && <p>Você construiu {walls} paredes</p>}
      {walls > 0 &&
        Array.from({ length: walls }).map((_, index) => (
          <Brick
            key={index}
            width={width}
            height={height}
            backgroundColor={backgroundColor}
          />
        ))}
    </div>
  );
};

Repare que o dumb component apenas recebe as propriedades, não existe controle de estado nele. É um componente simples, com responsabilidade única e de fácil reaproveitamento.

Já o Smart component possui controle interno de estado, lógica de negócio e controle do que está acontecendo. Ele importa o Dumb componente e envia seu estado para ele.

Podemos trazer os botões, textos, e os bricks como sendo os Dumb components (apesar de não ter feito no exemplo acima, pense que eles são components separados e importados dentro do Building). Essa é uma forma comum de trabalhar.

Entendendo Dumb Components (ou Stateless Components)

• São basicamente components sem estado, como botões, inputs, labels, etc. Eles são responsáveis por renderizar o que é passado para eles. Não possuem lógica de negócio e não possuem estado. São componentes que recebem props e renderizam o que é passado para eles.
• Raramente possuem estado próprio
• Recebem props e renderizam o que é passado para eles
• São focados em UI e possuem estilização

Entendendo Smart Components (ou Stateful Components)

• São components que possuem estado e lógica de negócio. Eles possuem responsabilidades de gerenciar o seu estado, passar propriedades para outros componentes (como os dumbs), possuem lógica de negócio (na maioria dos casos) e tratamentos mais apurados
• Na maioria dos casos possuem estado próprio
• Geralmente não possuem estilização
• Focados na lógica de negócio
• É uma junção de outros componentes

Conclusão

É muito importante entender essa separação, ela traz muitos benefícios que já foram citados anteriormente. Além disso, ela traz uma melhor organização do código, facilita a manutenção e a leitura do código.

Um dos erros mais comuns que vejo em projetos React é a falta de entendimento dessa separação, a duplicidade de código e a quantidade de lógica em um único componente.

Na medida que os projetos vão escalando e aumentando a sua complexidade, essa separação se torna ainda mais imprescindível.

Já trabalhei em projetos grandes onde a separação foi fundamental para o sucesso do projeto. Podemos inclusive separar em pacotes, externalizar e reutilizar em outros projetos. Essa abordagem funciona muito bem em monorepos, onde o reaproveitamento de código e o trabalho em um único repositório traz muitos benefícios.