Errores más comunes que cometen los desarrolladores de React

React es una biblioteca de JavaScript para crear interfaces de usuario. Durante el proceso de desarrollo de una aplicación React, cometemos muchos errores comunes. Eso no es un problema que nos equivoquemos, pero siempre es un problema más que cualquier otra cosa si no aprendemos algo equivocándonos. Aprender de los errores debe estar en nuestra actitud como desarrollador. En este artículo, conoceremos los 5 errores más comunes que cometen los desarrolladores de React.

1. Fallar en la aplicación de la estructura adecuada

Hay dos formas de escribir aplicaciones: poner todo en un gran componente ( monolito ) o dividir todo en componentes más pequeños ( microservicios ). Los principiantes a menudo no construyen lo suficiente, esto hace que su código sea más complicado.

Una de las características más importantes de React es el componente. Por diseño, las aplicaciones React están diseñadas para dividirse en componentes separados. Considere la siguiente página:

Para construir esta página correctamente usando React, debemos pensar en ella como un grupo de componentes que forman una página en lugar de una página completa en sí misma. Entonces, de esta manera, podemos crear diferentes conjuntos de componentes que podemos integrar para formar la página completa.

Ejemplo: El componente grande puede tener el siguiente aspecto:

import React from 'react';
    
function MyComponent() {
  return (  
    <div>  
      <div>    
        { // Header related HTML }
      </div>   
    
      <div>
        { // Chart related HTML }
      </div>
    
      <div>    
        { //Footer related HTML }
      </div>   
    
    </div>  
  );  
}

Esta práctica hace que el código sea más complejo y puede resultarle difícil depurar un componente grande. Por lo tanto, debe invertir su tiempo para separar las diversas partes interdependientes de su aplicación y recoger y mover esas partes a diferentes componentes. Esto hace que sus componentes sean más fáciles de mantener y reutilizar cuando sea necesario.

Podemos dividir los componentes anteriores en tres componentes diferentes de la siguiente manera: 

• Componente de encabezado:

  Encabezado.js

  import React, { Component } from 'react';    class Header extends Component {   render() {     return (       <div>         { // Header related HTML }       </div>     );   } }    export default Header;

 

• Componente de gráfico:

  Gráfico.js

  import React, { Component } from 'react';    class Chart extends Component {   render() {     return (       <div>         { // Chart related HTML }       </div>     );   } }    export default Chart;

• Componente de pie de página:

  Pie de página.js

  import React, { Component } from 'react';    class Footer extends Component {   render() {     return (       <div>         { // Footer related HTML }       </div>     );   } }    export default Footer;

Aplicación principal: hemos separado nuestra aplicación en tres componentes diferentes, ahora podemos integrarla en nuestra aplicación de la siguiente manera. Este método le ahorra tiempo y hace que su código sea reutilizable y fácil de depurar.

// MyComponent.js
import React from "react";
import Header from "./Header"
import Chart from "./Chart"
import Footer from "./Footer"
  
function MyComponent() {
  return (
    <div>
      <Header/>
      <Chart/>
      <Footer/>
    </div>
  );
}

2. Nombre del componente sin mayúsculas

El nombre de cada componente de React debe comenzar con una letra mayúscula; de lo contrario, si usamos ese componente, el navegador tratará ese componente como un elemento integrado, como span o div, y es posible que reciba la advertencia.

Ejemplo: si creamos un componente llamado chart e intentamos renderizar <chart/>, React ignorará este componente y obtendremos la siguiente advertencia: 

[ADVERTENCIA]
La etiqueta <gráfico> no se reconoce en este navegador. Si pretendía renderizar un componente de React, comience su nombre con una letra mayúscula.

Para evitar este tipo de advertencia, siempre comience el nombre del componente React con la letra mayúscula. 

3. Usar clase en lugar de className 

Al especificar el nombre de clase del elemento en React, los principiantes usan class en lugar de className y esto les da errores. Como la palabra clave class ya está reservada en JavaScript y JSX no es más que una extensión de JavaScript, es por eso que React usa className en lugar de class.

Ejemplo:

import React from 'react';
  
function MyComponent() {
  return (  
    <div class="yellow-bg">  
    <h1>Hello World!</h1>
    </div>  
  );  
}

Puede pensar que el código anterior es válido, pero no es un código válido porque usa una clase para especificar el nombre de clase del elemento. Para evitar errores, use className para especificar el nombre de clase de un elemento. Algunos desarrolladores experimentados de React también repiten este error con frecuencia, así que siempre tenga en cuenta que la palabra clave class ya está reservada en JavaScript, por lo que React usa className para especificar el nombre de clase de un elemento.

4. Llamar ganchos desde componentes de clase

Los ganchos nos permiten escribir mejor código React y hacer uso de métodos de estado y ciclo de vida de componentes dentro de componentes funcionales. Pero a veces, puede llamar ganchos desde componentes de clase y puede obtener errores. 

React proporciona muchos ganchos como useEffect, useState, useRef y muchos más. Pero podemos usar estos ganchos solo dentro de componentes funcionales. 

Ejemplo:

import React,{Component} from 'react';
  
class MyComponent extends Component {
    
  render(){
    
      const [sampleState, setState] = useState('hello world');
    
      return (  
        <div class="yellow-bg">  
        <h1>{sampleState}</h1>
        </div>  
      );
   }
}
export default MyComponent

El código anterior puede parecer válido a simple vista, pero no es un código válido porque en el código anterior se llama a useState desde el componente de clase. Como useState es un gancho, el código anterior nos dará el siguiente error: 

Nota: React Hook «useState» no se puede llamar en el componente de clase. React Hooks se debe llamar en el componente de función.

Entonces, la forma correcta de usar ganchos es llamarlo desde el componente de función como se muestra a continuación: 

import React from 'react';
  
function MyComponent() {
    
  const [sampleState, setState] = useState('hello world');
    
  return (  
    <div class="yellow-bg">  
    <h1>{sampleState}</h1>
    </div>  
  );  
}
  
export MyComponent

5. No usar accesorios clave cuando se usa el método de mapa de array 

Por lo general, usamos el método de mapa de array para mostrar una lista de elementos almacenados en una array. Podemos representar una lista de elementos de la siguiente manera: 

const lists = ['obj1', 'obj2', 'obj3'];
  
render() {
  return (
    <ul>
      {lists.map(item =>
        <li>{item}</li>)}
    </ul>
  );
}

El código anterior puede funcionar para aplicaciones más pequeñas. Pero a veces puede encontrarse con problemas de procesamiento al intentar modificar o eliminar elementos de la lista. React tiene que realizar un seguimiento de cada uno de los elementos de la lista en el DOM. Entonces, los accesorios clave ayudan a React a identificar qué elementos se han modificado o eliminado. Para dar una identificación única a todos y cada uno de los elementos dentro de la array, se requiere una propiedad clave. A menudo, no usamos un accesorio clave cuando usamos el método de mapa de array, pero a veces puede crear algunos problemas.

Podemos agregar una clave a todos los elementos de su lista de la siguiente manera:

const lists = ['obj1', 'obj2', 'obj3'];
  
render() {
  return (
    <ul>
      {lists.map(item =>
        <li key={item}>{item}</li>)}
    </ul>
  );
}