No usar `key` al listar componentes - Tutorial de React.js

Cuando trabajamos con listas, solemos tener un código similar a este, donde iteramos sobre un arreglo de datos y lo mostramos en pantalla. En este caso, tenemos una lista de platillos y, desde aquí, estamos mostrándolos. Para una lista pequeña, esto funciona bien, pero cuando toca trabajar con una lista muy grande, tal vez con un poco más de 50 o 100 registros, es cuando nos enfrentamos a problemas de rendereo o procesamiento de los datos por parte de React. ¿Tienes alguna idea de qué puede causar este problema? Ponle pausa al video y escribe en algún lado tres posibles ideas de esta causa. Vuelve a reproducir el video en cuanto tengas la lista. ¿Listo? Bueno, el problema radica en que React hace un seguimiento de cada elemento en el DOM, es decir, en el Document Object Model. Sin este seguimiento, es imposible saber si algún dato cambia y fuerza a escribir y realizar el procesamiento nuevamente, lo cual merma el desempeño de tu aplicación. ¿Acertaste o escribiste algo similar? ¡Súper! Si no, no te preocupes, que ahora ya lo sabes. Para solucionarlo, bastará con agregar la propiedad key a cada elemento de la lista en forma de atributo. Para esto, vamos a afectar aquí esta etiqueta y vamos a escribir la propiedad key. De esto, vamos a asignar el valor igual y desde aquí vamos a abrir nuestras llaves y vamos a asignar el valor de dish, en este caso. Aquí, simplemente, estamos asignando un valor. La idea es que key tenga un valor para que pueda hacer un seguimiento adecuado React. Si tu colección de datos es de objetos en lugar de cadenas de texto como, por ejemplo, aquí tenemos las puras cadenas y ¿qué pasa si las convertimos a un objeto? De esta forma, tenemos, en este caso, tres objetos, pero tenemos un id, el cual va a dar un seguimiento. Esto hace que todos esos procesamientos sean muchísimo más eficientes. Obviamente, desde aquí, vamos a tener que hacer un cambio y vamos a tener que asignar las propiedades adecuadas. Por ejemplo, en el key sería dish.id y en el contenido sería dish.name. Algo muy importante que debes recordar es que las llaves o keys en React deben de ser siempre únicas. Y el uso de estos id, como en este caso, o de cualquier identificador único, como las llaves, es siempre la mejor práctica para que React pueda llevar un seguimiento adecuado y así puedas mantener un buen desempeño de tu aplicación.