En este artículo explicaré cuál es la importancia de la propiedad key en react y cómo su mal uso podría causarnos Problemas al momento de desarrollar nuestras aplicaciones.

Sabemos дие ла manipulación де лос elementos en эль DOM эс costosa. React utiliza varias técnicas para que este proceso se resuelva de manera óptima, sin embargo, hay ocasiones en que como desarrolladores, debemos ayudar a optimizar este proceso.

El apoyo дие podemos brindar реагировать проживать в ла propiedad key la cual utiliza para poder relacionar elementos que se han cargado en el DOM y que luego se compararán para evaluar si deben serrepidentados nuevamente o no.

A continuación, veremos que con una asignación de valor correcta a la propiedad key, nuestro componente puede no actuar de la manera que esperamos.

El siguiente ejemplo está realizado con la version 16.8.0 de react la cual incorpora nuevas características, entre ellas el uso de Hooks. Если вы не ознакомились с новой формой работы, вы можете пригласить пользователя, который сможет получить информацию в доступной форме, https://es.reactjs.org/docs/hooks-intro.html.

Tenemos una lista de productos que se encuentra Representada por la Constante data.

Используйте приложение-компонент, которое содержит продукт, который инициализируется доблестью данных, для представления списка продуктов.

Como podemos ver, el componente también contiene un manejador de eventos el cual allowirá agregar un producto más a la lista en la parte Superior. Observemos cómo se ve en la pantalla …

Ahora, asignemos una cantidad cada producto.

Una vez hecho esto, añadiremos otro producto pulsando en el botón "Agregar" y veamos lo que sucede.

Podemos observar Que algo está mal. 😱

Vemos Que a los productos se les han asignado cantidades correctas y estos valores han persistido de acuerdo a la posición que tenían en el arreglo.

Veamos cuál fue el flujo de renderizado…

En el grafico anterior podemos observar Que React Está Realizando Varias Actualizaciones en el DOM, cuando lo único Que debería hacer es insertar los elementos necesarios en la parte Superior.

Esto se debe a que en nuestramplementación del componente, la propiedad key tiene el valor de index, который представляет позицию элемента в cada iteración. Entonces, al realizar un cambio de estado, react procesa el componente y compara el DOM con el DOM Virtual y al Exitir un elemento con la key исходной позиции (позиция 0), только актуализируйте lo que no совпадают, en este caso sólo el nombre del producto y no la caja de texto. De igual manera sucede con el segundo elemento (позиция 1), mientras que con el tercero, al no existsir una key con ese valor (позиция 2), react inserta un nuevo elemento en la parte inferior de la список продуктов.

Para solucionar esto, lo que deberíamos hacer como buena práctica es asignar a la propiedad key un valor único e impretible para cada elemento, en este caso podríamos usar la propiedad id.

Ahora, ingresamos las cantidades por producto y luego le damos en el botón "Agregar".

Veamos cómo fue el proceso de renderizado de react…

Como vemos, ahora эль componente нет presenta ninguna alteración en su comportamiento y no realiza ninguna Actualización adicional en el DOM, logrando así optimizar el proceso de renderizado de nuestro componente. 😁

Выводы

Como hemos visto, tenemos que tener siempre presente que la propiedad key es de mucha importancia para react y debemos tener cuidado al momento de asignarle un valor. Recordar дие Эсте доблесть debe ser único e непревзойденный эн эль contexto де elementos hermanos. Si logramos esto, podremos sacar el mayor proofcho а-ля librería en cuestión de rendimiento.

Много gracias пор эль tiempo у espero дие Эсте artículo haya sido де ayuda.

Можно использовать Twitter как @jcontrerasm_dev или на Github как @jcontrerasm