Componentes reutilizáveis no React: como evitar o "Button2Final"

Todo projeto React começa com intenção de reaproveitar componentes. Meses depois, há cinco versões de botão, três de modal e dezenas de cards quase iguais. Cada correção precisa ser feita em vários lugares, e a interface fica inconsistente.

Por que acontece

Alguém precisa de um botão "um pouco diferente", não entende o componente existente ou tem medo de quebrar outras telas. Copiar parece mais seguro.

Princípios de um componente reutilizável

1. 1.Variantes em vez de cópias: <Button variant="primary" | "ghost" | "danger">.
2. 2.Todos os estados incluídos: hover, foco, ativo, desabilitado, carregando (Tailwind sem bagunça: estados hover, focus, active e disabled do jeito certo).
3. 3.API pequena e clara: poucas propriedades, bem nomeadas.
4. 4.Composição: <Card><Card.Header />...</Card> em vez de dezenas de propriedades.
5. 5.Acessível por padrão: papéis, rótulos e foco corretos (Navegação por teclado e focus-visible: o detalhe que separa sites amadores).
6. 6.Tipado com TypeScript.

Onde ficam

Uma pasta de componentes base usada por todo o produto, documentada com exemplos. Esse é o coração de um design system (Design System na prática: como padronizar a UX/UI de produtos digitais ao nível Apple/Stripe).

Quando criar um novo componente

Quando o comportamento é diferente, não só a aparência. Mudança visual pequena é variante.

Refatorando o que já existe

Escolha um componente (o botão, geralmente), crie a versão definitiva com todas as variantes necessárias e substitua as cópias aos poucos. Repita.

A We Codex constrói interfaces com componentes padronizados. Veja sites e sistemas ou fale com a gente.