SOLID em React: O Princípio da Segregação de Interface

E aí, tudo certinho por aí? No nosso último papo, nós exploramos o Princípio da Inversão de Dependência. Se você não esteve por aqui naquela ocasião, não tem problema! Dá um pulinho lá pra conferir o que rolou nesse link.

Hoje, vamos meter a mão na massa e falar sobre o Princípio da Segregação de Interface (ISP — Interface Segregation Principle). Basicamente, o que ele nos diz é que um cliente não deve ser forçado a depender de interfaces que não utiliza. Traduzindo pro mundo React: é bom evitar componentes "monstruosos", que fazem de tudo um pouco, e partir para uma abordagem mais atômica, com componentes pequenos e focados.

O Princípio da Segregação de Interface

Vou trazer uma situação pra vocês que é muito comum: Sabe quando temos um componente que recebe um monte de props, mas só usa uma parte delas? Pois bem, essa pode ser uma situação onde o ISP é negligenciado.

Mas vamos tirar essa ideia do abstrato e trazer pra um exemplo prático!

Um exemplo da vida real

Imagine um componente chamado “MenuUsuario”. Ele exibe informações do usuário e recebe uma variedade de props, incluindo “nome”, “email”, “avatar”, “ultimaAtualizacao”, “nivelDeAcesso” e assim por diante.

Vamos dar uma olhada no código antes da segregação:

interface Usuario {
  nome: string
  email: string
  avatar: string,
  ultimaAtualizacao: string,
  nivelDeAcesso: string,
}

const DadosUsuario = ({ nome, email, avatar, ultimaAtualizacao, nivelDeAcesso } : Usuario) => (
  <div className="menu-usuario">
    <img src={avatar} alt="Avatar do usuário" />
    <h2>{nome}</h2>
    <p>{email}</p>
  </div>
);

Na prática, o "DadosUsuario" só está usando “nome”, “email” e “avatar”. O resto é completamente irrelevante para ele. Esse é um exemplo mega simplificado, mas dá pra perceber que “ultimaAtualizacao” e “nivelDeAcesso” não estão sendo usados. Isso vai contra o princípio que estamos estudando hoje.

Agora, que tal segregarmos essas interfaces para que o componente receba apenas o que precisa? Confere só (aproveitando pra falar do Pick do TypeScript, que se você ainda não ama… acredito que vai amar um dia hehehe):

interface Usuario {
  nome: string
  email: string
  avatar: string,
  ultimaAtualizacao: string,
  nivelDeAcesso: string,
}

type DadosUsuarioProps = Pick<Usuario, 'nome' | 'email' | 'avatar'>;

const DadosUsuario = ({ nome, email, avatar } : DadosUsuarioProps) => (
  <div className="menu-usuario">
    <img src={avatar} alt="Avatar do usuário" />
    <h2>{nome}</h2>
    <p>{email}</p>
  </div>
);

Percebeu a diferença? Agora nosso componente “MenuUsuario” só depende das props que realmente usa.

Olhando assim, isolado, pode parecer que esse tipo de coisa não faz muita diferença. Mas a longo prazo, isso vai facilitar a vida de pessoas que irão consumir e utilizar o componente DadosUsuario.

Conclusão

Princípios como o ISP são ferramentas valiosas para nos ajudar a escrever um código mais limpo e eficiente. No entanto, eles não são regras absolutas e nem sempre se aplicam a todos os cenários.

O segredo é entender o princípio, saber quando ele é útil e quando pode não se aplicar. Cada situação é única e requer um julgamento cuidadoso.

Por isso, continue estudando, continue aprendendo e continue experimentando! E espero poder te ajudar nessa jornada.

Espero que você tenha curtido esse papo sobre o Princípio da Segregação de Interface. Não deixe de comentar e compartilhar com seus colegas!

E ah! Se você usa outra biblioteca ou framework, fica aqui o desafio pra tentar levar esses conceitos pro seu universo. Comenta aqui depois o resultado!