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.
