Domina las listas y las keys en React
Renderizar listas en React es sencillo, pero hacerlo correctamente es difícil.
Muchos desarrolladores usan el índice del array como key. Esto es un error. Provoca errores y un rendimiento lento.
Así es como deberías manejar los datos dinámicos en React.
Cómo utiliza React las listas
React utiliza el método map() para convertir arrays en elementos de la interfaz de usuario (UI). Cuando usas map(), React transforma cada fragmento de datos en un componente.
El papel de las keys React utiliza un Virtual DOM. Cuando los datos cambian, React compara los nuevos datos con los antiguos. Este proceso se llama reconciliación (reconciliation).
Las keys actúan como identificadores únicos. Le indican a React exactamente qué elemento cambió, se movió o fue eliminado.
Por qué usar el índice como key es peligroso Usar el índice (0, 1, 2...) como key causa tres problemas principales:
- Errores en el estado de los componentes: Si ordenas una lista, los campos de entrada o las casillas de verificación podrían mostrar datos del elemento incorrecto.
- Caídas de rendimiento: React no puede rastrear qué elemento es cuál. A menudo vuelve a renderizar toda la lista en lugar de solo un elemento.
- Errores visuales: Tu interfaz de usuario puede parecer correcta, pero la lógica interna fallará cuando los elementos cambien de posición.
La forma correcta de usar las keys Para mantener tu aplicación rápida y estable, sigue estas reglas:
- Usa IDs únicos: Utiliza siempre IDs de tu base de datos (como un UUID o una clave primaria).
- Nunca uses
Math.random(): Generar keys durante el renderizado hace que React recree cada uno de los elementos en cada actualización. Esto destruye el rendimiento. - Mantén las keys estables: Una key debe permanecer igual para el mismo fragmento de datos durante todo su ciclo de vida.
Comparación de un vistazo
Característica: Estabilidad Usar el índice: Inestable Usar un ID único: Muy estable
Característica: Rendimiento Usar el índice: Deficiente Usar un ID único: Óptimo
Característica: Seguridad del estado Usar el índice: Inseguro Usar un ID único: 100% seguro
Resumen para desarrolladores
Usa el método map(). Pasa un ID único y estable a la prop key. Evita usar el índice del array en cualquier lista que pueda cambiar, ordenarse o filtrarse.