{"id":2849,"date":"2024-04-03T10:11:48","date_gmt":"2024-04-03T13:11:48","guid":{"rendered":"https:\/\/blog.innovaconnect.com.br\/?p=2849"},"modified":"2024-09-18T15:37:49","modified_gmt":"2024-09-18T18:37:49","slug":"erros-comuns-de-iniciantes-em-reactjs","status":"publish","type":"post","link":"https:\/\/innspire.dev\/blog\/erros-comuns-de-iniciantes-em-reactjs\/","title":{"rendered":"Erros comuns de iniciantes em ReactJS"},"content":{"rendered":"\n

Quanto falamos de ReactJS, em nosso constante caminho de aprimoramento e aprendizado, \u00e9 essencial reconhecer e superar os desafios comuns que encontramos ao trabalhar com essa poderosa biblioteca JavaScript. <\/p>\n\n\n\n

Portanto, neste artigo, vamos explorar alguns erros frequentes cometidos por iniciantes em ReactJS<\/strong> e como evit\u00e1-los para garantir um desenvolvimento mais eficiente e robusto. Continue acompanhando!<\/p>\n\n\n\n

<\/div>\n\n\n\n

1- A propriedade Style <\/em>no JSX<\/h2>\n\n\n\n

No mundo do JSX, que se assemelha ao HTML cl\u00e1ssico, h\u00e1 algumas diferen\u00e7as importantes que \u00e0s vezes esquecemos. Uma delas \u00e9 como lidamos com estilos. <\/p>\n\n\n\n

No HTML usamos uma string para definir estilos diretamente, de forma semelhante ao CSS padr\u00e3o. Por exemplo, para criar um bot\u00e3o com altura de 3rem<\/em> e cor de fundo azul, escrevemos algo assim:<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Dentro do JSX, precisamos atribuir estilos usando um objeto JavaScript e usar camelCase para propriedade que t\u00eam nomes compostos. No entanto, h\u00e1 uma diferen\u00e7a importante em rela\u00e7\u00e3o a outras propriedades do JSX<\/strong>.<\/p>\n\n\n\n

Normalmente, quando definimos o valor de uma propriedade em JSX, envolvemos o valor entre um par de chaves. Por exemplo:<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Entretanto, quando se trata da propriedade style <\/em>precisamos inserir mais um par de chaves para que consigamos atribuir os valores de nossos estilos, veja a seguir:<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

O motivo pelo qual usamos um segundo par de chaves ao definir a propriedade style <\/em>no JSX \u00e9 que o primeiro par de chaves \u00e9 utilizado para criar um “expression slot”, onde podemos inserir qualquer express\u00e3o JavaScript, como um condicional tern\u00e1rio, uma fun\u00e7\u00e3o ou uma vari\u00e1vel.<\/p>\n\n\n\n

J\u00e1 no segundo par de chaves cont\u00e9m o objeto JavaScript que define os estilos que queremos aplicar ao elemento. Portanto, essa dupla de chaves nos permite separar claramente a express\u00e3o JavaScript que estamos inserindo no JSX do objeto que cont\u00e9m estilos espec\u00edficos que queremos aplicar.<\/p>\n\n\n\n

Essa distin\u00e7\u00e3o \u00e9 fundamental<\/strong> para garantir a correta aplica\u00e7\u00e3o de estilos aos elementos JSX em nossas aplica\u00e7\u00f5es React.<\/p>\n\n\n\n

<\/div>\n\n\n\n

2- Acessar valores inexistentes<\/h2>\n\n\n\n

Outro desafio comum \u00e9 lidar com valores que podem estar indefinidos, especialmente com requisi\u00e7\u00f5es ass\u00edncronas, como buscar dados de uma API, confira o exemplo:<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Nesse caso, podemos nos deparar com o erro Cannot read properties of undefined. <\/em>Para resolver isso, podemos iniciar o estado como um array vazio<\/a>:<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Ou usar o optional chaining<\/a>:<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Lembrar de usar o optional chaining (?.<\/em>)<\/strong> ao acessar um m\u00e9todo ou uma propriedade de um objeto que ainda n\u00e3o existe \u00e9 uma pr\u00e1tica importante em JavaScript. Isso porque o optional chaining permite que o JavaScript retorne undefined <\/em>em vez de gerar um erro caso a propriedade ou m\u00e9todo n\u00e3o estejam definidos.<\/p>\n\n\n\n

Sendo assim, \u00e9 fundamental adotar o optional chaining sempre que estivermos lidando com propriedades e m\u00e9todos que podem ser null <\/em>ou undefined<\/em>, garantindo assim um c\u00f3digo mais robusto ou menos propenso a erros.<\/p>\n\n\n\n

<\/div>\n\n\n\n

3- Esquecer a propriedade key<\/em> em listas<\/h2>\n\n\n\n

Esquecer de adicionar a propriedade key<\/em> ao exibir uma lista em React \u00e9 um erro comum, por\u00e9m importante de ser evitado.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

A propriedade key<\/em> \u00e9 fundamental para o React identificar de maneira \u00fanica cada elemento da lista<\/strong>, permitindo uma atualiza\u00e7\u00e3o eficiente do DOM<\/a> e melhorando o desempenho da aplica\u00e7\u00e3o.<\/p>\n\n\n\n

Ao renderizar uma lista em React, \u00e9 necess\u00e1rio atribuir uma chave \u00fanica a cada elemento da lista. Isso permite que o React acompanhe e identifique quais itens foram adicionados, removidos ou modificados, garantindo uma renderiza\u00e7\u00e3o correta e eficiente dos elementos da lista.<\/p>\n\n\n\n

Mas, \u00e9 comum vermos o index<\/em> da itera\u00e7\u00e3o sendo usado da seguinte forma:<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Entretanto, isso n\u00e3o \u00e9 uma boa ideia. Isso porque o valor index<\/em> n\u00e3o est\u00e1 ligado a cada item espec\u00edfico da lista, mas a suas posi\u00e7\u00f5es.<\/p>\n\n\n\n

Portanto, em um caso onde a ordem da lista mudar\u00e1, o React perde a refer\u00eancia de cada um dos itens resultando em problemas de desempenho, renderiza\u00e7\u00e3o e at\u00e9 acessibilidade<\/strong>.<\/p>\n\n\n\n

Por isso, para evitar estes problemas devemos atribuir um valor realmente \u00fanico de cada item, por exemplo:<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Neste caso, onde est\u00e1 sendo usado de uma API externa, \u00e9 esperado que todo item tenha um id <\/em>\u00fanico. Mas, tamb\u00e9m h\u00e1 casos onde o valor n\u00e3o existe, ent\u00e3o podemos criar o nosso pr\u00f3prio id<\/em> \u00fanico da seguinte forma:<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Al\u00e9m disso, o m\u00e9todo crypto.randomUUID<\/em> \u00e9 seguro e pode ser usado em todos os navegadores modernos<\/a>. Ele gera um c\u00f3digo \u00fanico, similar a 0bf9b4a4-6bb4-11ee-b962-0242ac120002<\/em>, chamado de “universally unique identifier<\/a>” (UUID).<\/p>\n\n\n\n

<\/div>\n\n\n\n

4- Verifica\u00e7\u00e3o incorreta de listas vazias<\/h2>\n\n\n\n

\u00c9 comum querermos exibir condicionalmente uma lista apenas quando ela n\u00e3o estiver vazia, e muitas vezes recorremos a uma verifica\u00e7\u00e3o como essa:<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

No entanto, \u00e9 importante notar que esta abordagem pode n\u00e3o funcionar como esperado em todos os casos.<\/p>\n\n\n\n

Em nosso HTML veremos um simples 0. Isso acontece porque diferente de outros valores falsy (“”, false<\/em>, null<\/em>), o n\u00famero 0 \u00e9 v\u00e1lido dentro do JSX. Afinal, em algumas ocasi\u00f5es queremos realmente exibi-lo. <\/p>\n\n\n\n

Sendo assim, para garantir o comportamento desejado podemos utilizar uma verifica\u00e7\u00e3o mais precisa, como pokemons.length > 0 &&. Dessa forma, a lista s\u00f3 ser\u00e1 renderizada se o length <\/em>for maior que 0.<\/p>\n\n\n\n

Outra op\u00e7\u00e3o \u00e9 usar um verificador tern\u00e1rio, como:<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Essa abordagem tamb\u00e9m funciona bem e \u00e9 uma maneira clara de expressar a inten\u00e7\u00e3o de renderizar a lista apenas quando houver itens nela.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Outros erros comuns de iniciantes em ReactJS<\/h2>\n\n\n\n

Al\u00e9m dos 4 erros mais comuns de iniciantes em ReactJS citados acima, tamb\u00e9m \u00e9 importante mencionarmos mais duas situa\u00e7\u00f5es<\/strong> enfrentadas por desenvolvedores em fase inicial e dicas pr\u00e1ticas para superar esses desafios.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Falta de organiza\u00e7\u00e3o do c\u00f3digo<\/h3>\n\n\n\n