3 erros de reação de iniciantes que podem arruinar seu aplicativo

Como desenvolvedor React, você certamente cometerá alguns erros ao codificar com o framework. Alguns desses erros são bastante comuns. E devido à sua natureza sutil, você pode achar difícil identificar esses problemas para depurar seu aplicativo.

Descubra três dos erros mais comuns do React que os desenvolvedores cometem. Você pode cometer esses erros como desenvolvedor React iniciante, intermediário ou avançado. Mas aprender sobre eles e suas implicações o ajudará a evitá-los e resolvê-los.

1. Usando o tipo errado de função de retorno de chamada

A manipulação de eventos é uma prática comum no React, via A poderosa funcionalidade de escuta de eventos do JavaScript. Talvez você queira alterar a cor de um botão ao passar o mouse sobre ele. Talvez você queira enviar dados de formulário para o servidor no envio. Em ambos os cenários, você precisaria passar uma função de retorno de chamada para o evento para executar a reação desejada. É aqui que alguns desenvolvedores React cometem erros.

Considere o seguinte componente, por exemplo:

exportarpadrãofunçãoAplicativo() {
funçãomanipularEnviar(e) {
 e.preventDefault()
console.registro("Formulário enviado!")
 }
funçãoimprimir(número) {
console.registro("Imprimir", número)
 }
funçãodobrador(número) {
retornar() => {
console.registro("Dobro", número * 2)
 }
 }
retornar (
 <>
 {/* O código vai aqui */}
 </>
 )
}

Aqui você tem três funções separadas. Enquanto as duas primeiras funções não retornam nada, a terceira retorna outra função. Você deve ter isso em mente porque será a chave para entender o que você aprenderá a seguir.

Agora, passando para o JSX, vamos começar com a primeira e mais comum maneira de passar uma função como manipulador de eventos:

<formaao enviar={handleSubmit}>
<entradatipo="texto"nome="texto"valor padrão="inicial"/>
<botão>Enviarbotão>
forma>

Este exemplo passa o nome da função para o evento por meio da propriedade onSubmit, então o React chama handleSubmit quando você envia o formulário. Dentro de handleSubmit, você pode acessar o objeto de evento, que lhe dá acesso a propriedades como evento.alvo.valor e métodos como event.preventDefault().

A segunda maneira de passar uma função de manipulador de eventos é chamá-la dentro da função de retorno de chamada. Essencialmente, você está passando onClick uma função que chama print() para você:

{[1, 5, 7].mapa((número) => {
retornar (
 imprimir (número)}>
 Imprimir {número}
 </button>
 )
})}

Esse método é útil em cenários em que você deseja passar dados locais para a função. O exemplo acima passa cada número para a função print(). Se você usasse o primeiro método, não seria capaz de passar argumentos para a função.

O terceiro método é onde muitos desenvolvedores cometem muitos erros. Lembre-se de que a função doubler retorna outra função:

funçãodobrador(número) {
retornar() => {
console.registro("Dobro", número * 2)
 }
}

Agora se você usou no JSX assim:

{[1, 5, 7].mapa((número) => {
retornar (
 dobrador (número)}>
 Duplo {número}
 </button>
 )
})}

Nesse caso, a função da qual você retorna dobro() é o que é atribuído ao onClick. É essencialmente o mesmo que copiar a função retornada e colá-la em linha no onClick. Este último método não tem nenhum caso de uso. Na maioria das vezes, é melhor adicionar a função como uma variável (primeiro método) ou chamar a função dentro de um retorno de chamada (segundo método).

Todas as três técnicas são válidas porque, em todos os casos, você está passando uma função para o evento. No React, você precisa certificar-se de passar uma função para uma propriedade de evento. Pode ser uma variável, uma função codificada (inline) ou um objeto/função que retorna outra função.

2. Saída de zero durante uma verificação falsa

Quando você é renderizando condicionalmente um elemento em React, você pode usar uma instrução if...else ou a técnica de curto-circuito. O curto-circuito envolve o uso do e comercial duplo (&&). Se a condição antes do e comercial for avaliada como verdadeira, o navegador executará o código após o e comercial. Caso contrário, o navegador não executará nenhum código.

O curto-circuito é a melhor técnica graças à sua sintaxe concisa, mas vem com um efeito colateral que muitos desenvolvedores não percebem. Esse erro acontece por não entender exatamente como o JSX funciona com valores falsos.

Considere o seguinte código:

exportarpadrãofunçãoAplicativo() {
const matriz = [1, 2, 3, 4]
retornar (


 {matriz.comprimento && (


Variedade itens:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Contanto que a matriz tenha algo dentro dela, o React imprimirá cada item na página. Isso é por causa do matriz.comprimento check está retornando um valor verdadeiro. Mas o que acontece se sua matriz estiver vazia? Primeiro, os elementos seguintes serão exibidos na página, que é o esperado. No entanto, você encontraria um zero estranho aparecendo na tela.

A razão para isso é que matriz.comprimento retorna zero. O valor zero é falso em JavaScript. E o problema é que o JSX renderiza zero na tela. Outros valores falsos como nulo, falso e indefinido não são renderizados. Isso pode levar a uma má experiência do usuário porque sempre aparecerá zero na página. Às vezes, o zero pode ser tão pequeno que você nem percebe.

A solução é certificar-se de retornar apenas nulo, indefinido ou falso. Você faz isso verificando explicitamente zero na condição em vez de confiar em um valor falso:

exportarpadrãofunçãoAplicativo() {
const matriz = [1, 2, 3, 4]
retornar (


 {array.length !== 0 && (


Variedade itens:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Agora o valor zero não aparecerá na tela mesmo quando o array estiver vazio.

3. Falha ao atualizar o estado corretamente

Ao atualizar o estado em um componente React, você precisa fazer isso corretamente para evitar efeitos colaterais indesejados. Os piores erros são aqueles que não geram nenhum erro para você. Eles tornam difícil depurar e descobrir qual é o problema. Atualizações de estado ruim tendem a ter esse efeito.

Esse erro decorre de não entender como atualizar o estado quando você está usando o estado existente. Considere o seguinte código por exemplo:

exportarpadrãofunçãoAplicativo() {
const [array, setArray] = useState([1, 2, 3])
funçãoaddNumberToStart() {
 array.unshift (número)
 setArray (array)
 }
funçãoaddNumberToEnd() {
 array.unshift (número)
 setArray (array)
 }
retornar (
 <>
 {array.join(", ")}


 onClick={() => {
 addNumberToStart(0)
 addNumberToEnd(0)
console.log (array)
 }}
 >
 Adicionar 0 para iniciar/terminar
 </button>
 </>
 )
}

Se você executasse o código acima, notaria que ambas as funções adicionavam zero ao início e ao fim do array. Mas não adicionou os zeros ao array impresso na página. Você pode continuar clicando no botão, mas a interface do usuário permanece a mesma.

Isso ocorre porque, em ambas as funções, você está alterando seu estado com array.push(). O React avisa explicitamente que o estado deve ser imutável no React, o que significa que você não pode alterá-lo. React usa valores referenciais com seu estado.

A solução é acessar o estado atual (currentArray), fazer uma cópia desse estado e atualizar essa cópia:

funçãoaddNumberToStart(número) {
 setArray((currentArray) => {
retornar [número, ...arrayatual]
 })
}
funçãoaddNumberToStart(número) {
 setArray((currentArray) => {
retornar [...arrayatual, número]
 })
}

Este é o método certo para atualizar o estado no React. Agora, quando você clica no botão, ele adiciona zero ao início e ao fim do array. Mas o mais importante, as atualizações serão refletidas na página imediatamente.

Outros conceitos importantes de JavaScript para React

Este artigo abordou alguns dos erros comuns a serem evitados ao codificar no React. Todos os três erros abordados aqui decorrem de uma falha em entender o JavaScript corretamente. Como o React é uma estrutura JavaScript, você precisará de um conhecimento sólido de JavaScript para trabalhar com o React. Isso significa aprender os conceitos importantes que mais se relacionam com o desenvolvimento do React.