Supongamos que tengo esta matriz:
[ { label: 'Something', value: 4815 }, { label: 'Another', value: 1623 }, { label: 'Else', value: 4248 }, { label: 'Whatever', value: 1516 }, { label: 'Something', value: 2342 }, { label: 'Yep', value: 4815 } ] Si hago arr.map(item => (<div key={item.label}>...</div>)) entonces la clave se repetirá. Sé que el escenario ideal sería que los datos tengan identificadores, pero suponiendo que no los tengan, ¿es una buena idea hacer algo como:
arr.map((item, index) => (<div key={`${item.label}-${index}`}>...</div>))No se recomienda si el orden de la matriz puede cambiar, lo que a su vez puede afectar el rendimiento de la aplicación. Dar claves únicas a los elementos del objeto puede resolver este problema en su caso. ex)
{ label: 'Something', value: 4815, key: '...' },Quizás pueda usar "nanoid" en su lugar, que puede generar una clave única cada vez, como se presentó en la parte "mucho mejor" de este artículo. El índice como clave es un antipatrón.
Me gustaría agregar a mis compañeros aquí. La respuesta corta, no es una buena idea como ya se dijo. Si el orden de los elementos en la matriz puede cambiar, puede afectar negativamente el rendimiento.
¿Pero por qué? Me gustaría proporcionar una explicación de buceo más profunda.
React usa un algoritmo de diferenciación, puede leer más sobre esto en sus documentos :
Al diferenciar dos árboles, React primero compara los dos elementos raíz. El comportamiento es diferente dependiendo de los tipos de elementos raíz.
El algoritmo de diferenciación verifica el antiguo DOM virtual, que es un árbol de elementos para describir cómo se deben representar los componentes con el árbol. Cuando el usuario interactúa con la aplicación y provoca un cambio de estado o de accesorios, se genera un nuevo árbol y se realiza una búsqueda entre los dos árboles para encontrar la diferencia entre ellos.
Si se encuentran diferencias, el DOM virtual se reemplazará con las partes que se cambiaron.
Ahora, ¿por qué estoy explicando todo esto? porque para que React realice un seguimiento de todos sus elementos <div> generados entre esos cambios, se está utilizando la propiedad clave, entonces, React puede hacer coincidir esos elementos entre el árbol antiguo y el árbol nuevo y saber que no necesita generar ellos de nuevo si estaban allí antes.
Si le da a sus elementos en la matriz el índice como una clave, que como ya se mencionó, puede cambiar, React podría perder el rastro de esos elementos y generarlos nuevamente, lo cual es una acción innecesaria que se puede evitar. Entonces, si le da a sus elementos una clave única que no puede cambiar, está facilitando la vida de React al ayudarlo a rastrear esos elementos sin que se pierdan en el camino y esos elementos no tienen que generarse una y otra vez entre los cambios de árbol.