Nossa aplicação mobile conta hoje com dezenas de features e telas utilizado ReactJs com Cordova. Devido ao grande número de telas e grande quantidade de componentes que as compõem, ficou cada fez mais complexo a forma de renderizar certos componente dentro de certas telas/páginas (também componentes React). O uso de If/Else se tornou uma prática muito comum desde o começo do App onde logo após alguns poucos anos se tornaram um aninhamento de "If’s" em certos casos.

Recentemente tivemos que refatorar um deles, um menu com opções dinâmicas onde suas opções variam de acordo com a tela atual do app. Onde com o tempo, esse componente tornou-se uma série de If/Else aninhados.

BottomMenu.jsx (antes da refatoração)

 
Minha analise inicial foi de procurar código que se repetia no componente, e logo me deparei com o método que lidava com essas renderizações (conforme visto na imagem acima), que basicamente a mesma estrutura se repetia da seguinte forma:

• Condição “IF” para saber em que tela se está e/ou outra condição para que aquela opção do menu fosse renderizada no menu.
• Dentro do “IF” o componente (<IconWithLabel />) que renderiza o item do Menu, declarado com suas props específicas de key, ícone, ação de clique, etc.
• E por fim esse componente é adicionado em uma Array que é retornado no método render do BottomMenu.jsx.

Imagine um menu com dezenas de opções diferentes para dezenas telas diferentes, porem sempre repetindo essa mesma estrutura. Logo me veio a mente uma técnica que já utilizei em outras oportunidades, que nos propicia aplicar um loop usando essa estrutura uma única vez.

A técnica se trata do uso de objetos literais, atribuindo a um objeto uma lista de outros objetos, onde basicamente cada o objeto representa um botão do menu e todos eles são padronizados com os mesmos atributos. 

No caso cada objeto tem uma key, resourceKey, ícone, condition, onClickAction …

uiSelectors.js

A "sacada" é o atributo conditionToShow, que irá substituir os IFs, usando a função .filter onde só será retornado aqueles que atenderem a essa condição.

 O código ficou muito mais escalável e organizado ganhando muito em manutenibilidade. Ainda mais para nossa view BottomMenu.jsx.

Um grande ganho organização e de separação de responsabilidades, removendo toda a lógica da view deixando ela responsável apenas pela renderização. Agora se quisermos por mais um botão no menu, basta adicionar na lista de objetos seguindo o padrão dos anteriores.

Então, é isso, na próxima vez que pensar em uma IFs para renderizar certo componentes, lembre dessa possibilidade do uso de objetos literais.

Treine o olhar clínico para encontrar estruturas de código que se repetem no código, nunca disperdice uma oportunidade de dá aquele refatorada :). Se lembre código legível é código bom.