SOLID em React: de olho na substituição de Liskov

E aí, fera! Beleza?

Bora desbravar mais um princípio do SOLID, o tal do Princípio da Substituição de Liskov (Liskov Substitution Principle, ou LSP para os íntimos).

Mas antes de arregaçar as mangas, você deve estar se perguntando: “Que raios é esse princípio e por que eu deveria me importar com isso?” Bora entender.

O LSP, criado pela ilustre cientista da computação Barbara Liskov, diz que se um programa está funcionando bem com um objeto de um tipo específico, ele deveria funcionar igualmente bem com objetos de tipos derivados desse mesmo tipo. Em outras palavras, em um bom design orientado a objetos, deveríamos ser capazes de substituir um objeto base por um de seus derivados sem quebrar a aplicação.

“Ah, mas hoje em dia o React não é orientado a objetos!” — você pode argumentar. E, sim, você está corretíssimo. No entanto, os princípios do SOLID ainda são muito relevantes, porque eles nos ajudam a construir sistemas mais manuteníveis e escaláveis, independentemente da paradigma que estamos usando.

Mas ainda assim essa parada parece um pouco abstrata, né? Mas garanto que no dia a dia da programação, é mais comum do que a gente imagina. Então, pra ficar mais tranquilo de entender, vamos pra prática!

Vamos imaginar dois componentes de botão em React, um BotaoPrimario e um BotaoSecundario.

const BotaoPrimario = ({onClick, label}) => (
  <button onClick={onClick} className="botao botao-primario">
    {label}
  </button>
);

const BotaoSecundario = ({handleClick, texto}) => (
  <button onClick={handleClick} className="botao botao-secundario">
    {texto}
  </button>
);

Notou algo estranho? Pois é, os nomes das props são diferentes entre os componentes, embora eles façam praticamente a mesma coisa. Isso pode ser considerado uma violação do LSP, porque alguém que está acostumado a usar BotaoPrimario vai ter que aprender uma nova API se quiser usar BotaoSecundario. Apenas substituir um componente por outro que faz a mesma coisa não vai fazer funcionar. Não parece muito intuitivo, né?

Agora vamos ajeitar essa bagunça:

const BotaoPrimario = ({onClick, label}) => (
  <button onClick={onClick} className="botao botao-primario">
    {label}
  </button>
);

const BotaoSecundario = ({onClick, label}) => (
  <button onClick={onClick} className="botao botao-secundario">
    {label}
  </button>
);

Assim fica melhor, né? Agora, tanto BotaoPrimario quanto BotaoSecundario estão utilizando a mesma API de props, e isso torna o uso dos componentes muito mais previsível e fácil de entender.

Mas ó, não se engane. Os princípios SOLID, inclusive o LSP, são guias poderosas, mas não são regras inquebráveis. Existem cenários onde violar o LSP pode fazer sentido. Entender profundamente os princípios te capacita a fazer as melhores decisões, levando em consideração o contexto em que você está inserido.

Então é isso, pessoal! Espero que esse papo tenha te ajudado a entender um pouco mais sobre o Liskov Substitution Principle. E lembre-se: conhecimento nunca é demais. Continue estudando e se aperfeiçoando sempre. Até a próxima!