React JS. ¿Por qué los elementos de una lista deben llevar una clave?

Una explicación breve y clara de por qué React nos pide que asignemos una key a cada elemento de una lista

function MyComponent() {
const numbers = [1, 2, 3];
return (
<ul>
{numbers.map(n => <li key={`number--${n}`}>{n}</li>)}
</ul>
);
}

Listas y rendimiento

function MyComponent() {
const numbers = [1, 2, 3];
return (
<ul>
{numbers.map(n => <li>{n}</li>)}
</ul>
);
}
const products = [
{
id: 4,
name: 'P4'
},
{
id: 1,
name: 'P1'
},
{
id: 3,
name: 'P3'
}
];
function MyComponent() {
return (
<ul>
{products.map(p => <li key={`p--${p.id}`}>{p.name}</li>)}
</ul>
);
}
<li key="p--4">P4</li> --> <li>P4</li><li key="p--1">P1</li> --> <li>P1</li><li key="p--3">P3</li> --> <li>P3</li>
<li key="p--4">P4</li>
<li key="p--3">P3</li>
<li key="p--1">P1</li>
<li>P4</li>
<li>P3</li>
<li>P1</li>
<li key="p--5">P5</li>
<li key="p--4">P4</li>
<li key="p--3">P3</li>
<li key="p--1">P1</li>

Claves únicas

Claves e índices

<li key="p--0">P4</li>
<li key="p--1">P1</li>
<li key="p--2">P3</li>
<li key="p--0">P4</li>
<li key="p--1">P1</li>

Conclusiones

¿Quieres recibir más artículos como este?

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store