Voltar para o blog

1 min de leitura116 palavras

PLACEHOLDER — O custo escondido de um componente genérico

PLACEHOLDER — Toda prop booleana nova é uma dívida. Em algum momento vale mais escrever o segundo componente do que parametrizar o primeiro.

Vinicios EngelageVinicios EngelageFull stack · app & interface
  • Design System
  • Arquitetura

PLACEHOLDER — O componente começa com três props. Seis meses depois tem quatorze, três delas mutuamente exclusivas, e ninguém lembra por quê.

PLACEHOLDER — Os sinais de que passou do ponto

  1. PLACEHOLDER — existe um if que muda a estrutura do JSX inteira
  2. PLACEHOLDER — duas props nunca podem ser verdadeiras juntas
  3. PLACEHOLDER — o nome do componente virou um substantivo abstrato
components/panel.tsxtsx
<Panel compact bordered collapsible withHeader tone="danger" /><AlertPanel tone="danger" /><CollapsiblePanel title="Detalhes" />

PLACEHOLDER — Duplicação local é mais barata que acoplamento global. A regra prática: abstraia na terceira repetição, não na segunda.