Domine React: Padrões de Projeto e Truques para Desenvolvedores Júnior

Se você é programador e tem ganhado experiência, em algum momento de sua carreira encontrará o termo “padrões de projeto de software”. De forma geral, são “modelos” (metaforicamente falando) que permitem ter soluções padronizadas para problemas comuns. Por isso, estudar esses padrões permitirá que você identifique quando utilizá-los e como tirar proveito deles, o que pode melhorar significativamente a eficiência e a manutenibilidade do código, evitando erros e otimizando o tempo de desenvolvimento.

De forma geral, há um sem-número de padrões de projeto em software, por exemplo:

• Padrão Observador (Pub/Sub)
• Proxy
• Bridge
• Factory
• Builder
• Composite
• Visitor
• Singleton, etc…

Neste caso, não vou falar de nenhum desses, mas é bom reconhecê-los e saber que existem. Uma boa referência desses e de muitos outros pode ser encontrada em Refactoring Guru

Muitos deles estão mais focados no projeto geral de sistemas ou são inclusive fáceis de entender e aplicar para o backend, mas nem sempre para o frontend. Ou, inclusive, “traduzi-los” às vezes é difícil no momento de implementá-los.

Por isso, neste caso, vou focar em alguns dos padrões de projeto de React que nos permitem construir aplicações Front-end fáceis de manter e que evitam dores de cabeça futuras.

Padrões de Projeto em React

Em React, existem vários padrões de projeto e melhores práticas que o ajudarão a construir aplicações escaláveis e fáceis de manter. Aqui está uma lista com sua explicação super resumida:

1. Composição de Componentes:
   • Melhor Prática: Crie componentes pequenos e reutilizáveis, mantendo a lógica separada individualmente e tornando fácil a manutenção de cada um dos pequenos componentes.
   • Por Quê: É como brincar com blocos de construção; é mais fácil e organizado.
     
     
2. Componentes Contêiner e de Apresentação:
   • Melhor Prática: Divida os componentes em dois tipos, um para os dados e a lógica, e outro para a aparência. Dessa forma, se algo mudar na camada de apresentação ou na de dados, não afeta o outro, mantendo-os desacoplados. Além de manter seu código legível.
   • Por Quê: Mantém seu código limpo e facilita os testes.
     
     
3. Componentes de Ordem Superior (HOC):
   • Melhor Prática: Envolva componentes com um HOC para adicionar funcionalidades extras. Um HOC, em termos simples, é uma função que recebe um componente como parâmetro e retorna um novo componente com dados ou funções adicionadas. Por exemplo, um componente ao qual você adiciona o usuário que iniciou sessão atualmente no sistema, assim essa lógica é mantida isolada e só é adicionada aos componentes que a necessitam.
   • Por Quê: Pense nisso como dar superpoderes aos seus componentes quando você precisa deles.
     
     Adiciona um loader a qualquer componente, e o monta assim que os dados estão disponíveis. Você pode passar qualquer componente como parâmetro, apenas precisa que ele possa receber uma prop “data”.
4. Render Props:
   • Melhor Prática: Passe uma função ao método render de um componente. Permite que a lógica de “renderização” seja controlada ao passar o parâmetro, assim com a mesma lógica você lida com múltiplos formatos de apresentação.
   • Por Quê: Permite que você personalize muito seus componentes.
     
5. Gerenciamento de Estado com Context API e Redux:
   • Melhor Prática: Gerencie os dados a partir de um store “global”. Se houver alguma alteração em qualquer parte da aplicação, o store central é atualizado automaticamente, sem a necessidade de passar os resultados componente a componente. Um bom exemplo disso é o Redux-Toolkit.
   • Por Quê: Mantém seus dados organizados e evita passar dados através de muitos componentes (evitando um “prop drilling” desordenado).
6. Componentes Controlados:
   • Melhor Prática: Armazene os dados de um formulário em um componente pai. Dessa forma, o componente que recebe os dados não precisa saber como eles são atualizados ou gerenciados, focando-se apenas em exibi-los (renderizá-los).
   • Por Quê: Oferece um melhor controle sobre os dados e o comportamento de seus formulários.
     
7. Renderização Condicional:
   • Melhor Prática: Utilize condições para exibir ou ocultar partes de sua interface.
   • Por Quê: Você pode mudar dinamicamente o que os usuários veem, tornando sua aplicação interativa.
8. Tratamento de Erros com Boundary:
   • Melhor Prática: Envolva seções de sua aplicação para capturar erros.
   • Por Quê: Evita que toda a aplicação trave quando ocorre um erro.
9. DOM Virtual:
   • Melhor Prática: Compreenda como o React atualiza eficientemente a página real.
   • Por Quê: É como ter um assistente inteligente que torna sua aplicação mais rápida sem que você faça todo o trabalho.

Esta é apenas uma breve introdução a cada um dos padrões. Recomendo que você revise e investigue cada um deles em profundidade para poder dominá-los e aplicá-los quando necessário. No Dev.To, há um bom resumo desses (em inglês).

Estas melhores práticas e padrões de projeto são como ferramentas em sua caixa de ferramentas de programação que o ajudarão a construir aplicações web incríveis passo a passo. 🧰🚀👩‍💻