React

Tips generales de la librería

Stiven Castillo
2 min readMay 12, 2022

Atributo key en react

El atributo key de react es una de las propiedades de las que no experimento mucho, aquí un par de consejos al usar esta propiedad en listas.

Usar el index del array:

{users.map((user, index) => <ItemMemo user={user} key={index} />)}

En este caso cuando actualizo el array (por ejemplo, lo ordeno) los items se van a renderizar.

  • Para casos de listas estaticas cuyo número y orden permanece igual ✅
  • Para Itemcon estado (Ej: si el Item tiene un state selected). React vuelve a renderizar pero no reconoce qué item está seleccionado ❌
  • Con el Item memorizado no va a funcionar el memo, puesto que React difiere que los items son diferentes y debe renderizarlos. ❌
  • Para las listas dinámicas con elementos sin estado, en las que los elementos se sustituyen por los nuevos: listas paginadas, resultados de búsqueda y autocompletado y similares. ❌

Usar un único id:

{users.map((user, index) => <ItemMemo user={user} key={user.id} />)}

En este caso cuando se reordene no va a renderizar el Item, lo que permite un buen rendimiento.

  • Para las listas que pueden ser reordenadas y se pueden añadir elementos en lugares aleatorios. ✅
  • Para listas con items memorizados (React.memo) ✅

Usar un key random:

{users.map((user, index) => <ItemMemo user={user} key={Math.random()} />)}

Cuando se tiene un string random este se va a actualizar cada vez que se actualice el array, por ende, React siempre va a identificar que los items son diferentes y cuando pasa esto React los desmonta y vuelve a renderizar, lo que le da un duro golpe al rendimiento de nuestra lista.

Nota NO usar random strings. ❌