Errores de principiante en React

Muchos estudiamos la carrera ade computación porque nos llama la atención el desarrollo web, en lo personal, la creación de proyectos que he recibido a lo largo de la carrera me generan entusiasmo, sobre todo los que tienen que ver con frontend. Podemos crear proyectos interesantes al hacerlos una web app y para esto existen varias librerías y frameworks como Vue, React, Svelte, etc.

Es claro que meintras ganemos experiencia en el desaarrollo dejaremos de hacer malas prácticas y nos adaptamos a realizar código limpio y eficiente. Hoy hablaremos respecto a errores comunes a la hora de desarrollar en React, uno de los más populares.

¿Qué es React?

Es una librería de JavaScript para construir interfaces de usuario interactivas. Se utiliza para crear aplicaciones web y móviles de alto rendimiento y escalables. React utiliza una estructura de componentes y se integra fácilmente con otras bibliotecas y frameworks.

Errores

Manipular los estados de forma incorrecta

Los estados en React son las variables que controlan valores que serán importantes para interactuar con la página.

Están diseñados para cambiar su valor con su respectivo método "set", por lo que si cambiamos el valor de los estados sin el método correspondiente:

Estamos violando las reglas de React, si necesitamos trabajar con un valor del estado, lo ideal es insertarlo en una nueva variable, manipular el valor, y este nuevo valor sera enviado como parámetro al método set.

No agregar una clave unica al manejar arrays

Esto no genera problemas en aplicaciones pequeñas, pero al hacerlas más complejas, el hecho de no agregar un valor único al asignar datos puede generar problemas de rendimiento y comportamiento en React. Si has desarrolado alguna app seguramente te has topado con estaa advertencia:

Arreglar este error es sencillo, asegúrate de crear un id único y asignarlo a cada elemento renderizado cuando utilices un map para manejar un array:

Si la API o array que estás consumiendo te provee un id unico por elemento, puedes utilizarlo.

Mala utilización del valor del estado

Al manejar los valores de un estado debemos asegurarnos de que lo estamos haciendo de forma correcta.

Créditos a: https://www.joshwcomeau.com/react/common-beginner-mistakes/

Acá podemos ver que el contador parece que se adelanta al valor que recibimos en la consola. Esto se debe a que los métodos set de React son asíncronos, para poder interactuar con el valor de forma inmediata cuando ocurra un cambio en el debemos hacerlo dentro de una función useEffect:

Donde el segundo parámetro corresponde al valor que queremos capturar cuando se produce un camabio en él.