La importancia de la propiedad “KEY” en REACT.js

La importancia de la propiedad “KEY” en REACT.js

Hoy vamos a hablar de algo fundamental dentro de REACT.js que seguramente habrás pasado por alto las primeras veces que lo utilizas. Estoy hablando de una propiedad que se usa dentro del mundo de las listas y esta es la propiedad “KEY”.

Vamos a ver que es, como utilizarlo, su importancia.

Seguro que alguna vez has re de rizado una lista como esta:

 

Aquí vemos un ejemplo simple de una lista dentro de un array que la recorremos a través del método «map». Este recibe una arrow function a la que le pasamos cada elemento para renderizarlo. Si observamos nuestra página vemos que solo renderiza el nombre, la propiedad «key» no aparece. Veamos ahora que es y para qué sirve.

¿Qué es la propiedad key?

La propiedad key es un identificador que usa React en las listas, para renderizar los componentes de forma más eficiente. Debemos incluirla siempre en nuestras listas y esta debe ser única.

Qué pasaría si no le pongo esta propiedad a mis listas. Seguramente si abres la consola del navegador veras una advertencia como esta:

warning de google chrome por no tener key en las listas

Tu aplicación seguirá funcionando, pero esta advertencia nos recuerda que cada hijo de una lista debe tener una key única. Entonces, si funciona mi aplicación, porque debo utilizar la propiedad «key».

¿Por qué debo usar la propiedad key en mis listas?

Cojamos como ejemplo esta este código de una lista en react:

{

     list.map(item => (

         < item

                      key={item.id}

                      name={item.name}

          />

     ))

}

Si renderizamos la misma lista, una con key y otra sin ella, vemos que la única diferencia que existe en un principio es la advertencia que aparece en la consola. El problema viene cuando modificamos alguno de los elementos de esa lista.

En una lista sin key se renderizarían todos los elementos de nuevo mientras que, en una lista con key solo se renderizan los cambios en los elementos modificados o nuevos. Cuando solo tenemos 5 o 6 elementos puede que no se note, pero si tenemos 1000 o 2000 elementos la cosa cambia. Esto puede parecer que no es importante pero lo más costoso en nuestra aplicación es el renderizado.

Pero esto no es todo, imagina que le ponemos un estado a los ítems para que pulsando sobre ellos modifique sus estilos.

Vemos que todo sigue funcionando bien hasta que volvamos a cambiar de orden los elementos. En las listas sin key el ítem con los nuevos estilos seguirá siendo la misma posición que pulsamos, pero con distinto elemento porque hemos cambiado el orden.

En las listas con key el elemento se moverá y también los estilos nuevos que le hemos puesto.

Esto sucede porque al no tener key, REACT no sabe quién es quién. Vuelve a renderizar la lista y coge la posición del elemento que modificamos para volverlo a modificar, aunque ese elemento ya no es el mismo.

Si te ha parecido interesante este artículo deja tu opinión en los comentarios.

0 Comentarios

Deja un comentario

Debes estar registrado para poder comentar

Privacidad