La importancia de las keys
Parte de la sección Fundamentos del Journey de React de Coddy — lección 36 de 42.
Cada elemento devuelto por map necesita una key, una etiqueta estable y única para ese elemento:
{todos.map((todo) => <li key={todo.id}>{todo.text}</li>)}¿Por qué? Cuando el arreglo cambia, React compara la nueva lista con la antigua. Las claves le dicen cuál elemento es cuál, por lo que mueve los elementos en lugar de reconstruirlos, manteniendo intactos el estado, el enfoque y las animaciones.
La mejor key: un ID real de tus datos. Aceptable: cualquier valor único y estable por elemento (como los nombres de nuestras frutas). Último recurso: el índice del array. Rompe el reordenamiento, porque la posición no es identidad.
Pruébalo tú mismo
Esta lección no incluye un desafío de código.
Ponte a pruebaEsta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Fundamentos
1Conoce React
¿Qué es React?Tu primer componenteRegla del padre únicoJSX no es HTMLRecapitulación: Conoce React4Props
¿Qué son las Props?Pasando PropsDos PropsMismo componente, nuevos datosLa Prop ChildrenResumen: Props7Condicionales y Listas
Renderizado ternarioMostrar con &&Renderizar una listaLa importancia de las keysFiltrar y luego mapearRecapitulaciones: Condicionales y Listas2Expresiones JSX
LlavesMatemáticas dentro de las llavesLlaves en atributosLlamada a funciones en JSXRecapitulación: Expresiones JSX5Estado y Eventos
¿Qué es el estado?Contador de clicsContar en pasosAlternar con estadoEstado independienteRecapitulación: Estado y eventos8Proyecto: Tarjeta de perfil
Paso 1: Estructura de la tarjetaPaso 2: Tarjeta con PropsPaso 3: Botón de Me gustaPaso 4: Alternador de Seguir