Key

¿Por qué usar key al renderizar listas en React?

Cuando renderizas listas en React, las claves (key) ayudan a React a identificar cada elemento de la lista de manera única. Esto es importante para optimizar el rendimiento y asegurar que los elementos se actualicen correctamente en la interfaz al realizar cambios como agregar, eliminar o reordenar elementos.

¿Qué pasa si no se usa key o si no es única?

1. Rendimiento deficiente:
   • React no puede determinar qué elementos han cambiado, agregado o eliminado.
   • Esto obliga a React a volver a renderizar toda la lista, incluso si solo un elemento cambia.
2. Comportamiento inesperado:
   • Si las claves no son únicas, React puede reutilizar erróneamente componentes de una posición a otra.
   • Por ejemplo, un formulario podría conservar el estado del campo de entrada de un elemento incorrecto.

Cómo funciona key

• React usa key internamente para hacer seguimiento de cada elemento en el DOM virtual.
• Las claves permiten a React mantener el estado local de un componente cuando se reutiliza.

Ejemplo sin key

const App = () => {
  const frutas = ["Manzana", "Plátano", "Naranja"];

  return (
    <ul>
      {frutas.map((fruta) => (
        <li>{fruta}</li> // 🚫 React mostrará un error en la consola.
      ))}
    </ul>
  );
};

Error en consola:

Warning: Each child in a list should have a unique «key» prop.

Ejemplo con key

const App = () => {
  const frutas = ["Manzana", "Plátano", "Naranja"];

  return (
    <ul>
      {frutas.map((fruta, index) => (
        <li key={index}>{fruta}</li>
      ))}
    </ul>
  );
};

• Ahora React sabe identificar cada elemento del array gracias a las claves.

Buenas prácticas al usar key

1. Usar valores únicos y estables:
   • Lo ideal es usar un identificador único presente en los datos, como un campo id.

   Ejemplo:

   const usuarios = [
     { id: 1, nombre: "Juan" },
     { id: 2, nombre: "Ana" },
   ];
   
   return usuarios.map((usuario) => <li key={usuario.id}>{usuario.nombre}</li>);
   

2. Evitar usar el índice del array como key:
   • Usar índices puede causar problemas si la lista se reordena o actualiza.
   • Excepción: Es aceptable cuando los datos son estáticos, no se reordenan, y no se modificarán.

   Ejemplo:

   const colores = ["Rojo", "Verde", "Azul"];
   
   return colores.map((color, index) => <li key={index}>{color}</li>);
   

3. No reutilizar claves:
   • Asegúrate de que las claves sean únicas en todo el array.
4. Evitar claves calculadas dinámicamente:
   • Evita usar valores que puedan cambiar, como la fecha o contenido generado dinámicamente.

Renderizar un array sin id

Cuando los datos no tienen un id único, considera estas opciones:

1. Generar un key único basado en el contenido del elemento:
   • Puedes usar una combinación de valores dentro del objeto para construir una clave única.

   Ejemplo:

   const frutas = ["Manzana", "Plátano", "Naranja"];
   
   return frutas.map((fruta) => <li key={fruta}>{fruta}</li>);
   

   • Esto funciona bien si los elementos son únicos y no cambian frecuentemente.
2. Generar un identificador temporal:
   • Si los datos son dinámicos y no tienen un campo único, puedes usar una librería como uuid para generar identificadores.

   Ejemplo:

   npm install uuid
   

   import { v4 as uuidv4 } from "uuid";
   
   const frutas = ["Manzana", "Plátano", "Naranja"];
   
   return frutas.map((fruta) => <li key={uuidv4()}>{fruta}</li>);
   

   Nota: Generar claves únicas dinámicamente no es ideal si la lista cambia frecuentemente, ya que React no podrá asociar correctamente los elementos previos con los nuevos.

3. Usar índices como última opción:
   • Si no hay otra alternativa, usa el índice del array como clave.

   Ejemplo:

   const frutas = ["Manzana", "Plátano", "Naranja"];
   
   return frutas.map((fruta, index) => <li key={index}>{fruta}</li>);
   

Resumen

• Clave ideal: Un id único y estable.
• Clave aceptable: Índice del array, pero solo si los datos no se reordenan o cambian.
• Claves dinámicas: Generar identificadores con librerías como uuid si no hay una clave única en los datos.