5 princípios do DRY no React

A programação é frequentemente considerada um hobbie ao invés de uma profissão e existem boas razões para isso.

Nós, como desenvolvedores, devemos sempre buscar a melhor qualidade em qualquer código que escrevemos e, para isso, existem alguns princípios a serem seguidos em um projeto. Um dos mais utilizados é o DRY - Don't Repeat Yourself.

Abaixo você pode conferir 5 técnicas comumente utilizadas para evitar a duplicação de código em projetos com React.

1. Requisições HTTP

Buscar dados em algum serviço remoto é uma das ações mais comum e mais básica em qualquer aplicação React. Mesmo sendo básica, muitos iniciantes acabam cometendo algum erro ao escrevê-las. Veja a evolução mais comum nos projetos:

Etapa 1. Realizar chamadas dentro dos componentes

No início é comum desenvolvedores realizarem requisições à APIs dentro do próprio componente, principalmente porque a maioria dos tutoriais nos mostra isso.

Etapa 2. Abstrair a lógica em algum gerenciador de estado ou outro armazenamento

Nesta etapa, costuma-se remover a requisição à API de seu componente e colocá-la dentro da store (como redux ou context), mas isso não é suficiente, ainda há repetição de código.

Como "secar" a aplicação

Primeiro: tente criar uma classe HTTPService separada ou um hook personalizado useHTTP para gerenciar todas as requisições HTTP da sua aplicação. Você pode usar somente o axios para lidar com as requisições para você, mas saiba que detectar o estado de carregamento e lidar com erros pode ser um pouco trabalhoso e complicado para você.

Uma abordagem melhor: reserve um tempo para estudar bibliotecas como a react-query. Ela fornece algumas funcionalidades excelentes que podem ser úteis para qualquer tamanho de aplicação, no entanto, saiba que ela não remove a necessidade de utilizar bibliotecas como o axios ou a fetchAPI.

2. Tratamento de erros

Em minha experiência, vi pessoas cometendo erros em muitos lugares. Chamar toasts em todos os componentes geralmente não é uma boa ideia. Existem alguns cenários onde nós gostaríamos de dar algum feedback ao usuário.

1. Erros em chamadas HTTP

Middlewares (interceptam qualquer ação antes de chegar à store do Redux) são ótimos para lidar com a maior parte dos erros. Interceptar os erros que voltam de chamadas HTTP e mostrar um toast ao usuário. Nas configurações de um projeto Redux, pode ser implementado o seguinte:

const ErrorMiddleware = (state) => (next) => (action) => {
    const response = action.payload;
    if (response instanceof HttpErrorResponseModel) {
        next(CommonAction.showErrorToast(action.payload.message))
    }
    next(action)
}

2. Captura de Erros dos Componentes

Podemos implementar a ideia de Error Boundarias para detectar erros relacionados a problemas de carregamento nos componentes. Dessa forma, não precisamos colocar verificações de nulos em todas as partes do código.

3. Erros de Validação

Outro momento em que gostaríamos de exibir um aviso ao usuário é quando ocorre algum erro de validação em um formulário preenchido pelo usuário.

Tente utilizar algum tipo de biblioteca de validação de formulários (por exemplo, o Yup) para lidar com erros de validação e dar algum feedback ao usuário de forma automática. Ou você pode utilizar bibliotecas como react-hook-form para fazer isso por você.

3. Composição dos Componentes

Acredito que exista algum problema, mas algumas vezes, as pessoas que iniciam com o React falham em entender o recurso mais poderoso do React, ou seja, Componente Reutilizável.

Sempre tente quebrar os componentes em pequenas peças, isso tem variados benefícios:

1. Melhora a qualidade e leitura do código

2. Componentes com a mesma aparência não são duplicados no projeto.

Conclusão

Ai está. Estas são algumas técnicas que você pode aplicar ao seu projeto para seguir o princípio DRY no React. Estas não são soluções à prova de balas, mas entender como isso funciona pode levar você muito longe.