SOLID em React: Explorando a Inversão de Dependência

Preparem-se para uma jornada épica em uma galáxia de código não tão distante assim. Estou iniciando uma série de artigos em que abordarei os cinco princípios do SOLID, mas na ordem inversa, porque por que não?

E por falar em inversão, vamos começar pelo fim, explorando o Princípio da Inversão de Dependência.

Um pequeno passo para o homem, um salto gigantesco para o SOLID

Antes de colocarmos o pé na estrada (ou melhor, a mão no código), vamos relembrar o que é o SOLID. Esses princípios foram introduzidos por Robert C. Martin, mais conhecido como “Uncle Bob”.

A ideia é que, se o seu código segue esses princípios, ele será mais fácil de manter, entender e expandir. Agora, vamos conhecer a tripulação desta nave:

1. Princípio da Responsabilidade Única (Single Responsibility Principle): um componente deve ter apenas uma razão para mudar.
2. Princípio Aberto-Fechado (Open Closed Principle): você deve ser capaz de estender o comportamento de um componente, sem modificá-lo.
3. Princípio da Substituição de Liskov (Liskov Substitution Principle): os subtipos devem ser substituíveis por seus tipos de base.
4. Princípio da Segregação de Interface (Interface Segregation Principle): é melhor ter muitas interfaces específicas do que uma única interface geral.
5. Princípio da Inversão de Dependência (Dependency Inversion Principle): dependa de abstrações, não de implementações.

O último será o primeiro: Princípio da Inversão de Dependência

Como disse um Mestre Jedi, “Faça. Ou não faça. Não existe a tentativa.”.

Então, aqui estamos nós, começando pelo último. Não se preocupe, não é uma armadilha!

O Princípio da Inversão de Dependência (Dependency Inversion Principle) está no coração de muitas das vantagens associadas à orientação a objetos e ao design modular. Ele nos diz que as entidades de alto nível não devem depender de entidades de baixo nível; ambos devem depender de abstrações. Isso se traduz em um design mais flexível e um código mais sustentável, com menos efeitos colaterais indesejáveis quando uma mudança é introduzida.

Além disso, ao inverter as dependências, o código se torna mais fácil de testar. As dependências podem ser simuladas ou substituídas por implementações falsas (mocks) nos testes, tornando cada parte do sistema isoladamente testável.

Vamos examinar um exemplo de como isso pode ser implementado em um componente React:

function Pessoa() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://swapi.dev/api/people/1/')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return <div>{data && data.name}</div>;
}

Aqui, o componente Pessoa está usando a função fetch diretamente. Isso significa que Pessoa tem uma dependência direta sobre a implementação concreta do fetch, ou seja, de como obteremos os dados da API.

Se decidirmos mudar a forma como fazemos requisições HTTP em nosso aplicativo, teremos que alterar o componente Pessoa e todos os outros componentes que fazem o mesmo.

function usePessoa(id) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(`https://swapi.dev/api/people/${id}/`)
      .then(response => response.json())
      .then(data => setData(data));
  }, [id]);

  return data;
}

function Pessoa() {
  const data = usePessoa(1);

  return <div>{data && data.name}</div>;
}

Agora, o componente Pessoa depende de uma abstração (usePessoa), não diretamente da chamada fetch. Este hook pode ser usado em outros componentes, aumentando a reutilização e mantendo o componentePessoa limpo e fácil de entender.

Os princípios SOLID, embora originalmente destinados à programação orientada a objetos, podem nos ajudar a escrever código React mais robusto, legível e manutenível. Pensar em SOLID ao escrever código frontend pode nos levar a soluções mais sustentáveis e menos propensas a erros.

A jornada continua…

Se você curtiu esse e quer me apoiar nos demais artigos dessa série, me acompanha no LinkedIn. É o seu comentário e o seu feedback que me motiva a estar sempre gerando conteúdo pra comunidade.

Se você quer levar seu aprendizado ainda mais longe, confira meus cursos de React na Alura.

Fique ligado! O artigo será sobre o Princípio Aberto-Fechado (Open Closed Principle) e como aplicá-lo em seus componentes React.

Até lá, que a Força (ou o código limpo) esteja com você!