React Dojo

Buscar

Busca conceptos, ejercicios y quizzes

Entrevista · Reconciliación

Prop key

key no es solo para listas

La prop key le dice a React qué nodo del DOM corresponde a qué elemento entre renders. Cuando key cambia, React desmonta el componente antiguo y monta uno nuevo — lo que permite resetear estado de forma intencional.

El mecanismo de identidad

React compara el árbol nuevo contra el anterior por tipo y posición. Si un elemento tiene la misma key que antes, React lo reutiliza (actualiza). Si la key cambia, React lo desmonta y monta desde cero — incluyendo su estado interno y efectos.

key como reset intencional

Pasar una key que cambia según un ID externo es la forma idiomática de reiniciar un componente sin añadir lógica de reset dentro de él. Cuando el usuario cambia de elemento, la key cambia y React monta una instancia limpia automáticamente.

Tropiezos comunes

  • 01Usar el índice del array como key es un anti-patrón cuando la lista puede reordenarse — React reutilizará el nodo equivocado.
  • 02key no es una prop accesible desde el componente — no puedes leerla con props.key. Si necesitas el valor, pásalo como prop aparte.
  • 03key debe ser único entre hermanos, no globalmente. El mismo valor puede repetirse en listas separadas sin problema.
¿Fue útil?
Inicia sesión para dar feedback