Clean Code: Dicas para devs React

Código limpo é algo difícil de definir pois muitas vezes esse conceito pode ser subjetivo. O que faz com que o código de uma classe, componente ou função seja definida como limpo ou não? Qual é o momento de parar tudo, voltar e limpar a bagunça?

Recentemente tirei um tempinho pra consumir um conteúdo muito bom sobre clean code, e decidi citar alguns pontos interessantes para que devs React observem no seu dia a dia…

Componentes puros

(Não depende do seu meio, apenas dos parâmetros que recebe)
Durante a criação de um novo componente, tome cuidado para não adicionar muita logica que esteja acoplada à outros lugares do seu código, pois assim o componente só será utilizável naquele pedaço específico do seu app. Criar um componente mais genérico que receba por parâmetro alguma função ou valor pode ser mais interessante, e facilitará sua vida na hora de reutiliza-lo.

Composição vs Customização

Componentes podem receber parâmetros de “configuração”, ou seja, parâmetros que indicam como ele deve ser renderizado. Por exemplo: Input que recebe um parâmetro opcional de icon. Em casos pequenos isso é uma boa estratégia, mas na medida que o seu componente for ficando maior e mais complexo a quantidade de parâmetros de configurações pode se tornar um problema. Neste caso podemos usar o pattern de composição do React, que é uma estratégia onde dividimos a nossa interface em sub componentes e a partir disso, não precisamos mais usar as props de configuração. React composition pattern (https://www.developerway.com/posts/components-composition-how-to-get-it-right)

Condicionais no render

Evite colocar muitos condicionais, que vão controlar a exibição de algum pedaço da interface dentro do seu JSX. Uma alternativa melhor para isso é criar uma constante do tipo booleana e fazer a operação condicional nela. Isso vai ajudar a deixar a parte visual do seu componente muito mais clara além de facilitar manutenções no código