Jetpack Compose Academy · Lección

Keys para listas estables y rápidas

Ayude a Compose a seguir los elementos cuando cambian.

Lección 3 de 413 pasos

Keys para listas estables y rápidas es una lección gratuita de Jetpack Compose Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Jetpack Compose Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Jetpack Compose Academy incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en inglés.

How Compose Tracks Rows

By default, Compose identifies each row by its position in the list. Item zero is item zero, item one is item one, and so on.

Position Breaks on Change

When you insert or remove a row, every item below shifts position. Compose now thinks those rows are different and rebuilds them needlessly.

The Cost of Confusion

Rebuilt rows lose their state and animations. A removed item can make the whole list flicker as Compose reshuffles everything below it.

Give Each Item a Key

A key is a stable, unique value that names each item by identity, not position. Then Compose follows items even as they move.

items(users, key = { it.id }) { user ->
    Text(user.name)
}

Use a Real Unique ID

The best key is a true unique id from your data, like a database id. It stays the same no matter where the item sits.

Keys Must Be Unique

Every key in the list must be different. Duplicate keys throw a runtime error, so never key items by a value two rows might share.

Don't Key by Index

Using the index as a key defeats the purpose, since indexes shift just like position. Reach for it only when you truly have no id.

State Stays With the Item

With stable keys, a row's remembered state travels with it. A checkbox stays checked even after items above it are deleted.

Keys Power Animations

Stable keys let Compose animate items moving, appearing, or leaving. Without them, it can't tell a move from a rebuild.

items(items, key = { it.id }) { item ->
    Text(item.label, Modifier.animateItem())
}

itemsIndexed Takes Keys Too

The itemsIndexed builder also accepts a key lambda. You still get the index, plus stable identity for every row.

itemsIndexed(data, key = { _, item -> item.id }) { i, item ->
    Text("$i: ${item.name}")
}

Keys Are Almost Always Worth It

For any list that can change, adding keys is a tiny effort with a big payoff: correct state, smooth animations, and fewer rebuilds.

Quick Check

What makes a good list key?

Recap: Stable Keys, Stable Lists

Keys give items identity beyond position. Use a real unique id, keep keys unique, and your state and animations just work. ✨

Gratis para empezar

Aprende Kotlin con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos
30
Lecciones
120

Preguntas frecuentes

¿La lección «Keys para listas estables y rápidas» es gratis?

Sí — el texto completo de «Keys para listas estables y rápidas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Jetpack Compose Academy, actualiza a CoddyKit PRO. El curso de Jetpack Compose Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Keys para listas estables y rápidas»?

Ayude a Compose a seguir los elementos cuando cambian. Practicas Jetpack Compose Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Jetpack Compose Academy?

No se requiere experiencia previa. Jetpack Compose Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Keys para listas estables y rápidas»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Jetpack Compose Academy?

Sí. Cada lección de Jetpack Compose Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. LazyColumn frente a Column desplazable
  2. items e itemsIndexed
  3. Keys para listas estables y rápidas
  4. Encabezados fijos y listas por secciones
← Volver a Jetpack Compose Academy