5 erros comuns de um desenvolvedor React/React Native

Se você programa com ReactJS ou React Native provavelmente já cometeu ou ainda comete pelo menos um desses sete itens listados abaixo.

1. Não seguir um padrão de código

Criar qualquer tipo de aplicação sem um padrão de código é basicamente aceitar que seu software irá morrer logo ou se tornar tão desorganizado a ponto de não ser mais manutenível.

“Beleza, mas devo criar meu padrão?” Não, quer dizer, você pode, mas talvez não deva. Existem muitos padrões disponíveis na web que são adotados por milhares de projetos online. O que eu mais recomendo é o da AirBnB, principalmente para quem trabalha com React.

https://github.com/airbnb/javascript

Mesmo estando tudo detalhado no repositório você com certeza não deve ler tudo e tentar decorar os padrões, você deve utilizar ferramentas plugadas no seu editor ou IDE para avisar qualquer fuga do padrão. Para isso eu recomendo utilizar as seguintes ferramentas:

https://eslint.org/

O ESLint vai te ajudar avisando com sinais visuais as fugas do padrão de código assim que você editar o arquivo no editor. Para configurá-lo com o AirBnB Style Guides basta clicar aqui.

http://editorconfig.org/

O EditorConfig basicamente garante que indentação, tabs/spaces, tipos de término de linha e outras configurações relacionadas à estrutura do código sejam mantidas independente do desenvolvedor trabalhando nele.

https://prettier.io/

Não quer ficar se preocupando com padrões? Tudo bem, o Prettierautomaticamente atualiza seu código seguindo os padrões que você quiser toda vez que você salva o arquivo. Vale muito a pena dar uma olhada nele mas recomendo utilizá-lo sempre somado ao ESLint.

2. Não utilizar recursos da linguagem disponíveis

Outro grande erro que vejo na maioria de projetos que dou uma olhada é a utilização de recursos antigos do Javascript que foram substituídos por sintaxes mais recentes, principalmente recursos referentes às atualizações da ECMAScript. Alguns exemplos:

• Utilização do lodash ou underscore para ações que o ES6 já implementou como find, reduce, filter, map e some;
• Utilização apenas do var para declarar variáveis enquanto que o lete const possuem ótimos benefícios em alguns casos;
• Utilização de .then e .catch com Promises enquanto que a sintaxe de async/await deixa o código muito mais organizado;

Não conhece algum desses itens que eu mencionei aqui? Tudo bem, fiz um post em que destaco a grande maioria das novas funcionalidades do Javascript que você já deveria estar utilizando:

3. Não utilizar type checking

Outro grande problema que eu vejo que a grande maioria dos desenvolvedores não dá bola é com Type Checking. Se você não sabe o que é isso, basicamente o Type Checking dá a habilidade do editor e de todo ecossistema por volta do seu projeto entender cada variável e função, que tipo de parâmetros recebem e o que esperam retornar.

As ferramentas mais conhecidas para realizar type checking para React/React Native são:

https://flow.org/

O Flow é uma biblioteca criada pelo próprio Facebook e recomendada (quase que empurrada) para projetos React/React Native.

https://www.typescriptlang.org/

O TypeScript apesar de ser muito mais do que uma ferramenta para Type Checking é uma das mais famosas.

https://www.npmjs.com/package/prop-types

O PropTypes é uma ferramenta de Runtime Type Checking o qual realiza o Type Checking enquanto sua aplicação está executando diferente do Flow e TypeScript que são ferramentas de Static Type Checking (as quais permitem encontrar erros durante o desenvolvimento do projeto).

4. Não separar ou separar demais os componentes

Acho que um dos maiores enigmas para quem está começando no React é quando separar um conjunto de código em um componente, a minha opinião sobre isso é:

Se o conjunto de código possui um funcionamento isolado do restante dos outros componentes e não interfere em funcionalidades do seu componente pai, então, esse conjunto pode se transformar em um componente.

Isso porque diversas vezes vejo projetos com componentes de 200 linhas que podiam estar separados em 10 componentes e outros que possuem 10 componentes de 2 linhas que não deveriam nem estar separados.

Procure entender a lógica daquele componente estar separado. Será que ele vai ser reutilizado em mais algum local do código? Será que ele por si só terá algum funcionamento que vale ficar isolado do restante do código?

5. Não utilizar Stateless, Stateful e Pure components corretamente

Muitos componentes que criamos no React não precisam ser classes que estendem o Component, sabia?

• Componentes que não possuem estado e métodos de ciclo de vida, podem se tornar Stateless Componentes, explico isso aqui.
• Componentes que não possuem propriedades ou estado altamente complexos com muitos níveis podem se tornar PureComponents aumentando sua performance, explico isso aqui.

Concluindo

Existe um sexto erro que um desenvolvedor também pode cometer que é não entrar na comunidade da Rocketseat para trocar uma ideia sobre programação e empreendedorismo com milhares de pessoas por lá.

Se você curtiu o post não esquece de deixar as palmas e um comentário se você já cometeu um desses erros aí de cima e agora vai tomar mais cuidado 🙂